Print popup window Javascript

Question

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>

Duplicates: http://stackoverflow.com/questions/468881/print-div-id-printarea-div-only & http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div — leroydev, Jun 05 '16 at 23:16

score 2 · Accepted Answer · answered Jun 05 '16 at 23:29

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

Print popup window Javascript

1 Answers1