1

I have a modal that when popped open it has a print button to print the contents of the modal. I have followed a combination of answers from here, and here, which are great resources to try and get bootstrap modals to print at all, however, there seems to be a Chrome related bug I am facing. I cannot reproduce this in Safari, FireFox, or Edge.

What is happening is that when I load a modal and try to print only the contents of the modal it will try and print the same exact page multiple times and the number of pages it tries to print is equal to the number of pages the body is when printing.

Reading that might be confusing, so please visit my fiddle and see the issue. When you click print you'll notice it tries to print my modal contents 5 times because the background body is 5 print pages worth of content.

I believe this is happening because my modal has this property body.modal-open { visibility: hidden; } and visibility: hidden; still takes up page space... However if I do a body.modal-open { display: none; } then it will hide all of the contents of my modal and print a blank page.

Here is my CSS:

@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;
   }
}

Here is my HTML: 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">&times;</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>
maxshuty
  • 9,708
  • 13
  • 64
  • 77

1 Answers1

1

Perhaps your fiddle isn't an exact match to your real problem, but applying a class to the body content and marking that as display: none; in the same print scenario will prevent the unnecessary paging (see: http://jsfiddle.net/nr5kzhxv/)

body.modal-open .body-content {
    display: none;
  }

Edit: Looks like the original fiddle updated to show the modal in the same element as the content, so without re-structuring, this idea likely won't work. The right answer is to restructure the DOM in some way up front, although it may work to do it at runtime when the button or event fires to show the modal is triggered.

philazzi44
  • 56
  • 4