John Doe
John Doe
This could be a really detailed online CV
This could be a really detailed online CV
This could be a really detailed online CV
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:-
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.
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() {
document.getElementById("nonPrintable").className += "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.
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.
A number of people have mentioned to me that this method only works once, and that if you need to print another modal on the page, the background also prints.
To solve this problem we need to refresh the page. I know that this can be annoying if you have a lot of modals that you may want to print, such as client or employee records, so here is what I would do:-
immediately below the function functionPrint(), let's add another function to automatically refresh the page when the modal closes. Add the following function.
<script>
//refesh the page on modal close so that printfunction works again.
$(document).on('hidden.bs.modal', function () {
location.reload();
})
</script>
This script targets the document, so if you have modals on other pages and you open them, the page will reload when the modal closes. If this is an issue then the best way around it is to add this script only on the pages you want, and not in your main js file.
//refesh the page on modal close so that printfunction works again.
<script>
(function( $ ) {
$(function() {
$(document).on('hidden.bs.modal', function () {
location.reload();
})
});
})(jQuery);
<script>
If you found this article useful or have any queries leave a comment below.
Find out more about how you can get your business online by calling: 07545 642342
or
Fill out our contact form