DollarChills DollarChills - 5 months ago 26
Javascript Question

Print popup window Javascript

I have a table that has input boxes and a pop up window that has information in it. I would like to be able to print the table data and include the popup information as well. Is this possible. Quick example below.

Javascript

<script>
function divPrint() {
window.print();
}
</script>


HTML

<div id="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="popup">
<p>Need to print this as well</p>
</div>

</div>

Answer

Yes, you can.

It generally involves setting the .popup to display in the print view, using a css media query like @media print.

For example:

@media print {
     .popup {
          display:block !important;
     }
}

If you try to print this page, you should see the popup as well: https://output.jsbin.com/mezalosazo

Here's the version on jsbin if you want to edit it: https://jsbin.com/mezalosazo/edit?css,js,output

Comments