Menu icon Foundation
Printing a Reveal Modal - F6.3?

So I had some luck printing a reveal modal thanks to this post on stackoverflow - (http://stackoverflow.com/questions/12181760/twitter-bootstrap-print-content-of-modal-window)

However, the code used has the problem of not letting me print any other background content so when I try to print the page (without) the modal I can't. This is due to the CSS that hides the body visibility.

Does anyone of another solution to this?

To add to it I am using AJAX to load html content dynamically so there is another layer of complexity.

One suggestion was to add a class to the body with addClass and removeClass once the modal is open but I am not sure how I can do this with AJAX.

Any help or advice is much appreciated.

Foundation 6.3revealAJAX

So I had some luck printing a reveal modal thanks to this post on stackoverflow - (http://stackoverflow.com/questions/12181760/twitter-bootstrap-print-content-of-modal-window)

However, the code used has the problem of not letting me print any other background content so when I try to print the page (without) the modal I can't. This is due to the CSS that hides the body visibility.

Does anyone of another solution to this?

To add to it I am using AJAX to load html content dynamically so there is another layer of complexity.

One suggestion was to add a class to the body with addClass and removeClass once the modal is open but I am not sure how I can do this with AJAX.

Any help or advice is much appreciated.

Rafi Benkual over 2 years ago

So you are trying to print the modal open showing the rest of the page's content?

Rafi Benkual over 2 years ago

Just curious - what did you find to print the modal only? 

Seems like there is some CSS to hide the background

@media print {
  * {
    background: transparent !important;

You might try to override that.

jinch over 2 years ago

Hi Rafi,

Yes, ideally I would like the ability to print (command+P) just the model when open (not the rest of the page). I do have a print button on the AJAX loaded content as well that actually works as intended. I am running into some issues however in designating the difference between printing the modal and printing the page. I did find a workaround but it is very convoluted and not a complete solution. I'm hoping there may be a simpler way to go about this.

Currently, I adapted this to suit my needs - http://jsfiddle.net/95ezN/1227/ originally posted as one solution here:  http://stackoverflow.com/questions/12181760/twitter-bootstrap-print-content-of-modal-window

I then assigned another function to trigger the print function when Cmd+P is pushed so the print function can be triggered both from a button and keyboard.

/*Reset Cmd+P (PRINT) to run function*/
$(document).keydown(function (event) {
	"use strict";
    if ((event.ctrlKey || event.metaKey) && event.which === 80)  {
        event.preventDefault();
		$('.printMe').printElem();
    }
});

Then I need to assign the class 'printMe' to the modal and any other element I want printed // here is where the issue is created ~ all elements on the page + modal will print (if) the modal is opened first seeing they share the same class that triggers in function. I went as far as manipulating the print class and assigning one for the modal and one for the page but then my keyboard print function will only work on one or the other : /

Again.. as mentioned this seems way too convoluted and really just looking for the cleanest way to print modal content - one ideally where I can also use the default cmd+P print functionality of all browsers.

jinch over 2 years ago

Ooooo... i found a gem :)

All the way at the bottom of this post http://stackoverflow.com/questions/12181760/twitter-bootstrap-print-content-of-modal-window @Peter Kerr simply used CSS to target the body class that is amended when a modal is open / and just "displayed:none;" all elements you don't want printed.

This by far is the most straight forward solution I found // no javascript required!

For Foundation ~ this would look something along these lines:

@media print {
    /* hide main content when dialog open */
    body.is-reveal-open div.off-canvas-wrapper {
        display: none;
    }
}