Printing A Modal Dialog

In this article we are going to discuss a simple way to print a modal dialog box, without printing the rest of the page in the background. Modals are streamlined, but flexible dialog prompts powered by JavaScript. Take a look at the examples below:-


Card image

John Doe

Some example text some example text.

See Profile

Jane Doe

Some example text some example text.

See Profile
Card image

This technique makes use of the relatively little used targeting of print media using css, <style type="text/css" media="print"></style>, and a very small amount of JavaScript. So let's take a closer look.

Create The Modal / Modals

First immediately below the body tag we create our modal dialog boxes:-

<body>
  <div class="modal fade" id="JohnDoe" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
              <div class="modal-header">
                  <h4 class="modal-title">John Doe</h4>
              </div>
              <div class="modal-body">
                <div class="card" style="max-width:400px; margin-top: 20px">
                  <img class="card-img-top img-fluid" src="images/man.jpg" alt="Card image" style="width:100%">
                  <div class="card-body">
                    <h4 class="card-title">John Doe</h4>
                    <p class="card-text">This could be a really detailed online CV</p>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn" data-dismiss="modal">Close</button>
                  <button type="button" class="btn" onclick="functionPrint()" data-dismiss="modal">Print</button>
              </div>
          </div>
      </div>
  </div>
        

Create as many modals as you want, just remember to give each one a unique id, that you can target when required. Also remember the content of a modal, contained within the <div class="modal-content"></div> tags can be whatever you want; I have chosen to display a card, but you can tailor content to your own requirements.

The extra button to invoke the print dialog uses a JavaScript function (functionPrint), fired by the onclick event. You can name that function whatever you like, I named mine functionPrint. The script for the function itself can be written in the body of the HTML, usually before the closing </body> tag as follows:-

  <script>
      function functionPrint() {
        $('#nonPrintable').addClass('noPrint');
        window.print();
    }
  </script>
        

Alternatively it can be written as part of separate js file, which is what I have done.

Now the simple, but extremely important bit.


Hide The Background

Immediately after after your modals within the <body> section put the rest of you page's HTML, but wrap the entire code in a div and give it a recognizable id such as:-

  <div id="nonPrintable">

    <div class="container">
    rest of the page....
    </div>

  </div> <!-- nonPrintable -->
</body>
        

Now in the head section of your page add the following style, targeting only print media

  <style type="text/css" media="print">
    .noPrint{
      display: none;
    }
  </style>
        

That's all there is to it. Now when you call the modal and click on the print button, all that will be printed is the modal dialog box, because that is all that is visible. Why is this? Quite simply because we added the class .noPrint to the div identified by the id #nonPrintable, and as you can see the .noPrint class adds the CSS property of display: none, making the entire contents of the div invisible.

I hope you have found this article useful and informative, and please feel free to leave any comments via my contact form.