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.

Advertisements

About Jerome

I am a senior C# developer in Johannesburg, South Africa. I am also a recovering addict, who spent nearly eight years using methamphetamine. I write on my recovery blog about my lessons learned and sometimes give advice to others who have made similar mistakes, often from my viewpoint as an atheist, and I also write some C# programming articles on my programming blog.
This entry was posted in Programming and tagged , , , , . Bookmark the permalink.

8 Responses to An easy way to print a web modal popup window

  1. Joe says:

    Hi im new in bootstarp and i try to learn as munch i can, can u explain me this please “Then, put everything else on the page body into a div with an ID of lb1. ”
    thanks

    Like

    • Jerome says:

      Maybe I didn’t tag this post properly – it isn’t about bootstrap. This is ASP.NET, using DevExpress controls for a popup window. It uses CSS media styles to force the whole page not to print, except for the popup, so when you try to print it, only the popup is visible. (Because a popup isn’t really a separate page – it’s just a div that’s visible and overlaid on top, so if you try to print it, everything on the page will print.)

      So when I said “put everything else on the page body into a div with an ID of lb1”, I meant enclose everything else on the page inside a div element with that ID, since the CSS makes everything inside that div invisible when printing.

      Like

  2. Gayathri says:

    Hello Jerome, I am new to Bootsrap and want to print the contents of bootstrap modal. Unfortunately window.print() prints the background too. Please let me know how can I do it? Thanks.

    Like

    • Jerome says:

      As stated, this post isn’t about bootstrap.

      I have encountered a similar problem in node, but I think I manually created a window using “normal” javascript, and printed that, rather than trying to hack bootstrap to do my bidding.

      As far as I remember, I had two command buttons in a grid, where the “view details” button opened a bootstrap modal, but the “print details” used standard javascript to generate a window containing a table with the data formatted nicely for printing. That in turn contained a print button, which printed the window.

      Like

  3. chillfar says:

    Your solution is good, it doesn´t print the entire modal if is scrollable though… just the area you are focusing when printing. It has to be a way that you can print the whole modal

    Like

    • Jerome says:

      I haven’t looked at this for ages, but it is still working in production. So yeah, that’s a possibility. In my case, I used this for a small report with a table of values obtained w.r.t. bank account validation. So I was also responsible for the code that generated the HTML of the popup, and was careful to generate it such that it printed nicely.

      Like

  4. Carlos Matte says:

    This solution worked fine and it is really simple and helpful….thanks to post and share this information.

    Like

  5. Widyahong says:

    Thankyou very much, ITS WORK.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s