在CSS媒体打印查询中自定义模态高度和宽度

时间：2015-03-17 01:30:37

标签： javascript jquery css jquery-ui media-queries

我的Jalery 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库生成的HTML模型（#mypreview_modal）：

<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; 
    }
}

不幸的是我的代码无效。非常感谢任何帮助。

1 个答案:

答案 0 :(得分：0)

@media print {.ui-dialog .ui-widget .ui-widget-content .ui-corner-all .ui-front .ui-dialog-buttons .ui-draggable { height：1055px！important ;宽度：350px！important; }}

相关问题
最新问题