An easy way to print a web modal popup window

In my new job, we are using DevExpress controls quite extensively, and that involves using an ASPxPopupControl. I need to print the contents of a modal popup, and I naively thought… How difficult can it be?

It turns out to be quite difficult after all, or so it would seem. The problem is, you can only print the contents of a window, and a popup these days is not a real window, thanks to years of bad developers abusing popup windows. Printing it will also print everything else on the page, which is normally hidden behind the fake dialog.

The solutions I found online, being this one that doesn’t work because it is incomplete, and this one on the component writer’s support site, use an outright, nasty, heavy-handed hack… placing an iframe in a separate page, populating it with the popup’s content set to that page, and then printing the iframe/page. Oh, nooooo…

It always amazes me that people just blindly accept such hacks when there is surely a better way… I took a few minutes to look for one, and found a clue here on a much easier, cleaner way. Ever heard of CSS media? (I hadn’t, as I’ve only ever used CSS to effect elements on the screen.) This can be set to screen or print.

That is, you can add a style section like this to the head section of your page:

    <style type="text/css" media="print">
    #lb1{
    display:none;
    }
    </style>

Then, put everything else on the page body into a div with an ID of lb1. Presumably you only show the popup when you need to, so we don’t have to mess with it’s media type at all. Then your print button, which runs on the client side, can just call the JavaScript window.print().

And that’s it! Easy, and this will work no matter what kind of popup window you use, so it isn’t tied to DevExpress.