自定义 CSS 媒体打印查询中的模式高度和宽度
Customize Modal Height and Width in CSS Media Print Queries
我的模态是由我的Jquery UI库（http://jqueryui.com/dialog/#modal-form）生成的。我想使用 CSS 媒体打印查询打印我的对话框。
这是我的代码：
$("#mypreview_modal").dialog({
autoOpen: false,
draggable: true,
height: 520,
modal: true,
resizable: false,
width: 525,
buttons: {
"Print": function() {
//Initialize all elements to be unprintable
$('body').children().addClass('doNotPrint');
myid_print_id($('.printThis'));
},
"Close": function() {
$( this ).dialog( "close" );
}
}
});
由 JQuery UI 库生成的模态 （#mypreview_modal） 的 HTML 代码：
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" tabindex="-1" role="dialog" aria-describedby="mypreview_modal" aria-labelledby="ui-id-2" style="height: auto; width: 525px; top: 81px; left: 212px; display: block; z-index: 101;"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix ui-draggable-handle doNotPrint"><span id="ui-id-2" class="ui-dialog-title">ID Preview</span><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" title="Close"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">Close</span></button></div><div id="mypreview_modal" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 426px;">
<div id="preview_options" class="container doNotPrint">
<div id="preview" class="btn-group">
<button id="preview_front" type="button" class="btn btn-primary">Front View</button>
<button id="preview_back" type="button" class="btn btn-primary">Back View</button>
<button id="preview_dousided" type="button" class="btn btn-primary">Double Sided</button>
</div>
</div>
<div id="front" class="printThis doNotPrint">
<img id="student_front" src="http://localhost/drupal-7.34/sites/all/modules/myid/images/student_front.png">
<img id="myid_info_photo" class="duo_photo" src="http://localhost/drupal-7.34/sites/all/modules/myid/images/id-background.jpg">
<div id="myid_info_college" class="duo_college">CEIT</div>
<div id="myid_info_idnumber" class="duo_idnumber">101-03043</div>
<img id="myid_info_signature" class="duo_signature" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAABkCAYAAABwx8J9AAAERklEQVR4Xu3VAQ0AAAjDMPBvGh0sxcF7ku84AgQIECBA4L3Avk8gAAECBAgQIDAG3RMQIECAAIGAgEEPlCgCAQIECBAw6H6AAAECBAgEBAx6oEQRCBAgQICAQfcDBAgQIEAgIGDQAyWKQIAAAQIEDLofIECAAAECAQGDHihRBAIECBAgYND9AAECBAgQCAgY9ECJIhAgQIAAAYPuBwgQIECAQEDAoAdKFIEAAQIECBh0P0CAAAECBAICBj1QoggECBAgQMCg+wECBAgQIBAQMOiBEkUgQIAAAQIG3Q8QIECAAIGAgEEPlCgCAQIECBAw6H6AAAECBAgEBAx6oEQRCBAgQICAQfcDBAgQIEAgIGDQAyWKQIAAAQIEDLofIECAAAECAQGDHihRBAIECBAgYND9AAECBAgQCAgY9ECJIhAgQIAAAYPuBwgQIECAQEDAoAdKFIEAAQIECBh0P0CAAAECBAICBj1QoggECBAgQMCg+wECBAgQIBAQMOiBEkUgQIAAAQIG3Q8QIECAAIGAgEEPlCgCAQIECBAw6H6AAAECBAgEBAx6oEQRCBAgQICAQfcDBAgQIEAgIGDQAyWKQIAAAQIEDLofIECAAAECAQGDHihRBAIECBAgYND9AAECBAgQCAgY9ECJIhAgQIAAAYPuBwgQIECAQEDAoAdKFIEAAQIECBh0P0CAAAECBAICBj1QoggECBAgQMCg+wECBAgQIBAQMOiBEkUgQIAAAQIG3Q8QIECAAIGAgEEPlCgCAQIECBAw6H6AAAECBAgEBAx6oEQRCBAgQICAQfcDBAgQIEAgIGDQAyWKQIAAAQIEDLofIECAAAECAQGDHihRBAIECBAgYND9AAECBAgQCAgY9ECJIhAgQIAAAYPuBwgQIECAQEDAoAdKFIEAAQIECBh0P0CAAAECBAICBj1QoggECBAgQMCg+wECBAgQIBAQMOiBEkUgQIAAAQIG3Q8QIECAAIGAgEEPlCgCAQIECBAw6H6AAAECBAgEBAx6oEQRCBAgQICAQfcDBAgQIEAgIGDQAyWKQIAAAQIEDLofIECAAAECAQGDHihRBAIECBAgYND9AAECBAgQCAgY9ECJIhAgQIAAAYPuBwgQIECAQEDAoAdKFIEAAQIECBh0P0CAAAECBAICBj1QoggECBAgQMCg+wECBAgQIBAQMOiBEkUgQIAAAQIG3Q8QIECAAIGAgEEPlCgCAQIECBAw6H6AAAECBAgEBAx6oEQRCBAgQICAQfcDBAgQIEAgIGDQAyWKQIAAAQIEDLofIECAAAECAQGDHihRBAIECBAgYND9AAECBAgQCAgY9ECJIhAgQIAAAYPuBwgQIECAQEDAoAdKFIEAAQIECBh0P0CAAAECBAICBj1QoggECBAgQMCg+wECBAgQIBAQMOiBEkUgQIAAAQIG3Q8QIECAAIGAgEEPlCgCAQIECBA4R7EAZWDJXlYAAAAASUVORK5CYII=">
<div id="myid_info_course" class="duo_course">BSCS</div>
<div id="myid_info_name" class="duo_name">Alyssa E. Gono</div>
<div id="myid_info_barcode" class="duo_barcode" style="padding: 0px; overflow: auto; width: 324px;"><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 20px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 4px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 55px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 55px; width: 20px"></div><div style="clear:both; width: 100%; background-color: #FFFFFF; color: #000000; text-align: center; font-size: 10px; margin-top: 5px;">101-03043</div></div>
</div>
<div id="back" class="printThis doNotPrint">
<img id="student_back" src="http://localhost/drupal-7.34/sites/all/modules/myid/images/student_back.png">
<div id="myid_info_osas_phone" class="duo_osas_phone">341-2786-233</div>
<div id="myid_info_osas_email" class="duo_osas_email">osas@carsu.edu.ph</div>
<div id="myid_info_guardian" class="duo_guardian">Sabiniano L. Gono</div>
<div id="myid_info_guardian_phone" class="duo_guardian_phone">+639087686224</div>
<div id="myid_info_osas_hotline" class="duo_osas_hotline">085-342-4451</div>
<img id="myid_info_registrar_signature" class="duo_registrar_signature">
<div id="myid_info_registrar" class="duo_registrar">MERINESSA D. GONZAGA</div>
</div>
</div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix doNotPrint"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Print</span></button><button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Close</span></button></div></div></div>
我想使用 CSS 媒体打印查询在打印过程中自定义整个模态高度和宽度：
@media print {
.ui-dialog .ui-widget .ui-widget-content .ui-corner-all .ui-front .ui-dialog-buttons .ui-draggable
{
height: 1055px;
width: 350px;
}
}
不幸的是，我的代码不起作用。任何帮助将不胜感激。
@media print {.ui-dialog .
ui-widget .ui-widget-content .ui-corner-all .ui-front .ui-dialog-button .ui-draggable{height： 1055px ！important;width： 350px ！important; }}
相关文章：
- electronic BrowserWindow的最小高度和宽度在hide(）show(）方法之后不起作用
- Javascript，访问一个主要对象模块模式中的每个对象
- ExtJS——在展开/折叠时调整面板高度
- 分析高度属性时出现意外值｛｛specs.height｝｝.index.html
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 试图在引导模式内动态生成图表，得到offsetWidth错误
- 同位素库错误:未捕获错误无布局模式包装生产线8
- 单击页面上的链接后高度发生变化
- 在DOM中查找一个模式并替换它's的内容使用jquery
- 如何缩短MongoDB ObjectId并在Mongoose模式中使用它
- 使用.load时引导模式背景高度
- 如何在不同的设备模式下强制元素的高度
- 自定义 CSS 媒体打印查询中的模式高度和宽度
- 在Windows 8 Metro模式下，在浏览器中获取虚拟键盘的高度
- 根据当前屏幕窗口大小设置模式窗口的最大高度
- 键盘关闭模式为交互式时的动画视图高度 [反应本机]
- window.screen.width在阶梯模式下提供iPhone/iPad屏幕的高度
- IE7标准文档模式中SPAN/DIV高度不正确
- 如何显示自定义高度和宽度的模式，而不失去可调整大小的属性
- 引导模式旋转木马高度问题在Firefox和Chrome
