CODEWITHSUNDEEP
javascriptjquery
John T
John T

Reputation: 1078

How to print the contents of a popup window with javascript?

I've got a webpage that utilises bPopUp to pop up a modal window with jQuery.

The contents of that window are exactly what I would like to print (and nothing else on the main page).

I've tried linking a button on the popup window to run the command window.print(); but this just prints the whole page showing the popup window obscuring the rest of the page.

Does anyone know how I can only print the contents of the pop up window and nothing else?

Thanks

Upvotes: 5

Views: 13561

Answers (1)

Sanket Tarodekar
Sanket Tarodekar

Reputation: 302

Sample HTMP

<div id='DivIdToPrint'>
    <p>This is a Popup which needs to be printed.</p>
</div>

<div>
    <p>Do not print.</p>
</div>

<input type='button' id='btn' value='Print' onclick='printDiv();'>

Javascript

function printDiv() 
{
var divToPrint=document.getElementById('DivIdToPrint');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}

Give an ID to your Popup div and use above example. You need to give inline styling to print the popup exactly.

Upvotes: 7

Related Questions