I need to print a table and two popup windows when an action is triggered, but I am facing issues with the page-break in CSS. None of the solutions I have attempted so far seem to work. Currently, the two pop-up windows overlap with the table data, and I want them to either appear on separate pages or consecutively.
HTML
<div class="printable">
<table class="table">
<th>Option 1</th>
<th>Option 2</th>
<tr>
<td><input class="span6 text-center" type="text" id="cost1"></td>
<td><input class="span6 text-center" type="text" id="cost2"></td>
</tr>
</table>
<div class="popup" data-popup="popup1">
<p>Need to include this in print</p>
</div>
<div class="popup" data-popup="popup2">
<p>Need to include this in print</p>
</div>
<input type="button" value="Print" class="btn btn-success" onclick="window.print();" />
</div>
CSS
.popup {
width:100%;
height:100%;
display:none;
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
}
@media print {
body * {
visibility: hidden;
}
.printable * {
visibility: visible;
}
.popup {
display: block;
}
}