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

javascript, jquery

Solution

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.

Problem

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

Original source