When I open a modal, there's a print button inside it. I've researched solutions provided here and here to enable printing of Bootstrap modals, but I'm encountering a Chrome-specific bug. The issue doesn't occur in Safari, Firefox, or Edge.
Upon trying to print only the modal contents, the same page is printed multiple times, correlating with the number of pages when printing the body.
For a clearer understanding, please visit my fiddle to see the problem in action. Clicking the print button will result in the modal contents printing multiple times due to the background body being equated to numerous print pages.
The culprit seems to be the property
body.modal-open { visibility: hidden; }visibility: hidden; still reserves page space. Changing it to body.modal-open { display: none; }CSS code:
@media print {
body.modal-open {
visibility: hidden;
}
body.modal-open .modal .modal-header,
body.modal-open .modal .modal-body {
visibility: visible;
}
.close, #printBtn {
display: none;
}
}
HTML code: Launch demo modal
<div class="modal-must-live-inside-of-this-body-content">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<button id="printBtn">
Print this modal
</button>
<br /><br />
Note: This should *ONLY* Print the contents (title, body, etc) of the modal when you click the "Print this modal" button. Which it does, however since the background body content is 12 pages worth of text it prints this same modal 12 times...
<br /><br />
I believe this is due to the fact that the background body has the `visibility: hidden` instead of `display: none`.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor congue nisl non tristique. Sed cursus velit non erat finibus molestie. Cras porttitor leo et tristique placerat. Nunc non nisi nec erat vestibulum aliquam sed in mauris. Aliquam erat volutpat. Nulla malesuada enim a tellus luctus commodo. Phasellus porttitor pharetra tellus sit amet accumsan. Nam fringilla leo sit amet tellus eleifend, eu imperdiet eros semper. Ut tristique tempus ligula sed bibendum.
Quisque eu porttitor lacus, et placerat sapien. Curabitur venenatis nec velit quis pulvinar. Nulla vel fermentum sapien, sed hendrerit sapien. Praesent in condimentum leo, nec lobortis elit. Curabitur maximus eros risus, quis luctus augue efficitur in. Nulla iaculis velit felis. Sed sit amet consectetur libero, non laoreet ipsum. Aenean nec elit id leo gravida eleifend. Mauris id sem egestas, vulputate ipsum ut, consequat justo. Mauris malesuada condimentum arcu. Nulla dictum eu nunc id tincidunt. Nulla facilisi. Sed eget purus ac sapien elementum porta. Integer a laoreet ex. Aliquam eu erat pharetra, aliquam turpis non, lacinia libero. Etiam et nisi quis ipsum pharetra egestas.
Nunc hendrerit lacus justo, tempus dignissim quam elementum id. Nullam et volutpat sapien. Ut a cursus ex. Sed magna neque, congue vel massa feugiat, porta iaculis nibh. Maecenas ac consectetur libero. Maecenas tristique posuere libero, sed fermentum neque tristique ac. Sed hendrerit id velit ac sollicitudin. Vivamus gravida sapien in lobortis commodo. Sed sagittis, turpis et mattis lobortis, erat eros rhoncus velit, nec fringilla eros ante interdum nunc.
Nunc cursus finibus egestas. Sed sit amet velit metus. Fusce quis condimentum arcu, a ultricies augue. Vivamus blandit purus eu ex viverra ullamcorper. In sed erat in augue tincidunt euismod. In eget lobortis nunc. Vestibulum non arcu et leo sagittis finibus. Duis pulvinar tellus eget diam dictum pellentesque. Nulla nec mauris metus. Praesent lacinia ipsum scelerisque purus auctor tincidunt. Nam sagittis massa sit amet nisi condimentum, ut dignissim ligula rutrum. Suspendisse accumsan, arcu eu maximus dignissim, purus elit vulputate ante, id rutrum tellus nisi blandit dolor. Proin a lorem vel libero maximus pharetra et a felis. Donec venenatis fermentum lacus non vestibulum.
</div>