I need help with my scrollable bootstrap modal that has a print button on top. When the user clicks the button, I want to print the modal content. Here is the code snippet: 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 received advice from Stack Overflow suggesting I replace 'visibility : hidden' with 'display : none', but this resulted in a blank page when printing.
If anyone can offer guidance on how to avoid these extra printed pages while maintaining the modal layout, it would be greatly appreciated.