打印 Scrollable Bootstrap Modal 在末尾添加额外的页面

Question

I have a scrollable bootstrap modal with a print button on top of it. When user clicks it, i'm printing the modal. Below is the code, HTML :

<div class="container-fluid" id="body-noPrint">
    /* HTML BODY CONTENT */
</div>

<div id="print-content">
     <!--PRINT PREVIEW MODAL MARKUP-->
        <div class="modal fade" id="printViewModal" tabindex="-1" role="dialog">
              <div class="modal-dialog">
                    <div class="modal-content">
                          <div class="modal-header">                                
                                <button type="button" class="btn btn-primary pull-right" id="modal-Printbtn"><span class="glyphicon glyphicon-print" aria-hidden="true"></span> Print</button>
                          </div><!--MODAL HEADER CLOSE-->
                          <div class="modal-body">
                              <!--DISPLAY THIS ROW AT MODAL VIEW-->
                                <div class="row">
                                        /* HEADER UI */                     
                                </div><!--MODAL VIEW HEADER CONTENT CLOSE-->

                              <!--DISPLAY THIS ROW AT PRINT-->
                                <div class="row" style="display:none;"> 
                                        /* HEADER PRINT */
                                </div><!--PRINT VIEW HEADER CONTENT CLOSE-->

                              <!--PRINT VIEW DYNAMIC TABLE-->
                                <div class="table-responsive" id="modalTable">
                                    <table id="modalTbl" class="table table-bordered">
                                      <thead>
                                        <tr class="active">
                                            <th class='col-xs-6'></th>
                                            <th class='col-xs-1'></th>
                                            <th class='col-xs-5'></th>
                                        </tr>
                                      </thead> 
                                      <tbody>               
                                      </tbody>           
                                    </table>                            
                                </div>                                                                                        
                        </div>                
                    </div>
              </div>
        </div>
</div>

JS :

$('#prntBtn').click(function(){
    window.print();
});

CSS :

@media print{
  /* Below CSS Makes Modal Content Visible At Print */
    body.modal-open {
        visibility: hidden;
    }

    body.modal-open .modal .modal-header,
    body.modal-open .modal .modal-body {
        visibility: visible;  /* make visible modal body and header */
    }

    body.modal-open .modal {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        overflow: visible!important;
    }

/*Print Preview Modal Styling CSS*/    
    #printViewModal .modal-dialog {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #printViewModal .modal-content {      
      height: 100%;
      border-radius: 0;
      overflow:auto;
    }

    #printViewModal *{
        font-size:x-small !important;
    }

    #modalTbl thead tr > th{
        text-align:center;
    }

    #modalTbl tbody tr > td{
        text-align:left;
    }

    #modalTable{
        margin-top:10px;
    } 
}

I got a suggestion from stack overflow to replace 'visibility : hidden', for that i tried 'display : none', but this displays blank page at print.

Can someone please help me, in getting rid of these extra pages when printing.

Answer 1

You can enable this option [Background graphics] to see what is extra printed on your page. Hope this helps to find out the root cause.