bootstrap modal popup example

bootstrap modal popup example on load.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 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 3 pages worth of text it prints this same modal 3 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>

<div class="body-content">
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...

CSS

@media print {
  body.modal-open {
    visibility: hidden;
  }
  body.modal-open .body-content {
    display: none;
  }

  body.modal-open .modal .modal-header,
  body.modal-open .modal .modal-body {
    visibility: visible;
  }
  
   .close, #printBtn {
     display: none;
   }
}

JavaScript

$(document).ready(function(e) {
    $('#mymodal').trigger('click');
    
    $('#printBtn').on('click', function() {
          window.print();
    });
    
});