Tuesday, June 23, 2015

Browser print the content on popup modal and not parent page

If a modal window is active, the browser print function can produce less than ideal results where the parent page shows in the background and the modal on top (much like it appears in the browser). The following CSS trick when placed on the modal content, will allow only the modal to print and not the parent page.

@media print {
    body * {
    .printable, .printable * {
    .printable {
Simply place a div with the class "printable" around the modal content to be printed and the CSS will make that area visible with the rest of the page hidden.

No comments:

Post a Comment