I am trying to print a modal using window.print() command. The problem I am facing is that for eg. the content on modal is of 1 page long but when i print it shows 2 pages with same content getting repeated on next page i.e. the modal is being printed twice. Please suggest how to prevent this. Below is the css i am using to print long content on multiple pages.
@media print {
.modal {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
visibility: visible;
/**Remove scrollbar for printing.**/
overflow: visible !important;
}
.modal-content {
visibility: visible !important;
/**Remove scrollbar for printing.**/
overflow: visible !important;
}
}
When there's a print screen it always shows all of the html content, and when there's a modal in top of the content, the window.print() will duplicate the modal as many times as needed in order to cover all the content behind it.
So if your content needs 2 pages to display everything and your modal is only 1 page, it will duplicate the modal so it always stays on top of the content.
Here's an example of that problem you're having:
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
function printPage() {
window.print();
}.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}<div id="fakeDiv">
<button id="myBtn">Open Modal</button>
<p class="everything">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec justo sodales, rhoncus dui at, pretium nulla. Curabitur venenatis ut turpis quis viverra. Suspendisse ac nisi malesuada, aliquam lorem vel, pellentesque dolor. Maecenas dignissim ultrices
turpis ut eleifend. Sed volutpat nibh a tellus congue auctor. Sed scelerisque urna vitae tellus pulvinar porta at at est. Pellentesque sit amet facilisis mauris, vel dignissim felis. Mauris mattis nunc mauris, sed eleifend risus egestas vitae. Suspendisse
nec molestie lectus. Etiam at enim lacinia, sollicitudin odio id, posuere justo. Phasellus elit lectus, venenatis eu velit eget, aliquet luctus neque. Duis tristique blandit lacus, nec rhoncus dui ornare vel. Nulla id fringilla justo, in mattis nisi.
Maecenas a dui tempus, rutrum odio sed, molestie turpis. Aliquam tempor leo sed ligula interdum iaculis sed ac nunc. Suspendisse sit amet porta tellus. Morbi et quam vestibulum, accumsan risus id, iaculis libero. Donec condimentum dapibus elit, vel
hendrerit lectus auctor vel. Vivamus vehicula, dolor eget lacinia sagittis, justo purus venenatis leo, vitae imperdiet nisi eros id leo. Quisque sed bibendum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Suspendisse tristique, metus ac suscipit consequat, metus enim iaculis nibh, efficitur dignissim lorem libero sed erat. Morbi in tortor ultrices leo finibus vestibulum. Donec eget lacinia enim. Mauris hendrerit commodo dapibus. Sed vulputate est commodo,
egestas arcu eu, tristique leo. Sed velit enim, fringilla non tristique malesuada, fringilla non erat. Nulla euismod in nisi non auctor. Maecenas in tempus magna. Maecenas at velit luctus, fringilla lacus in, scelerisque magna. Pellentesque ac tempus
risus, sit amet ultricies libero. Proin sed gravida augue, quis egestas enim. Suspendisse ac aliquet nibh, quis elementum elit. Vestibulum leo sapien, eleifend ut consectetur eu, mattis vel dolor. Integer nulla erat, tempus nec quam eget, pharetra
porta dui. In laoreet aliquam porttitor. Praesent tortor est, dignissim vel scelerisque ac, pellentesque a ipsum. Aenean maximus leo vel lacus mattis, sit amet dignissim enim sodales. Phasellus ac mauris sit amet ante sollicitudin elementum. Donec
quis maximus mi. Nullam vitae purus ac odio fermentum cursus et sed urna. Pellentesque condimentum tellus ex, et convallis felis eleifend at. Pellentesque et sem ac ipsum pellentesque sagittis. Quisque ut ipsum fermentum, egestas leo ac, accumsan
lacus. Pellentesque aliquet tellus vel tortor venenatis blandit. Etiam ultrices id magna ut tristique. Sed ac urna vel nibh auctor aliquet. Donec sollicitudin iaculis rutrum. Ut nec augue accumsan, dapibus dolor quis, finibus nisi. Mauris lectus elit,
efficitur ultricies sollicitudin nec, pretium sed dui. Phasellus sagittis iaculis ligula et iaculis. Aenean dictum nisl et odio pulvinar dictum. Phasellus condimentum massa ipsum, at congue quam egestas vitae. Integer enim mauris, fringilla sit amet
tempor scelerisque, tincidunt eget ligula. Proin condimentum rutrum maximus. Nunc tellus nisl, dictum vel fermentum ut, feugiat a nisi. Nam sed sapien sit amet elit egestas semper eu ut diam. Suspendisse blandit vitae metus porttitor cursus. Vestibulum
et gravida massa. Fusce in neque sit amet lacus luctus ornare at id augue. Nam at congue ligula. Quisque eu mollis dui, eu dictum justo. Maecenas nec placerat velit. Morbi placerat, diam eu dignissim dignissim, turpis magna rhoncus lectus, ac interdum
velit tortor sed tortor. Aliquam lobortis leo erat, vitae accumsan tortor tempus at. Sed bibendum vel justo id commodo. Nam ante nisl, consectetur a elit vel, imperdiet suscipit justo. Etiam sit amet cursus odio. Nam id volutpat sapien. In pellentesque
a nisi sit amet efficitur. Maecenas fringilla libero sit amet aliquet mattis. Nullam risus mauris, porttitor eget eros quis, commodo cursus elit. Integer eros justo, iaculis luctus quam vel, fermentum luctus orci. Quisque aliquam rutrum facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec justo sodales, rhoncus dui at, pretium nulla. Curabitur venenatis ut turpis quis viverra. Suspendisse ac nisi malesuada, aliquam lorem vel, pellentesque dolor. Maecenas dignissim
ultrices turpis ut eleifend. Sed volutpat nibh a tellus congue auctor. Sed scelerisque urna vitae tellus pulvinar porta at at est. Pellentesque sit amet facilisis mauris, vel dignissim felis. Mauris mattis nunc mauris, sed eleifend risus egestas vitae.
Suspendisse nec molestie lectus. Etiam at enim lacinia, sollicitudin odio id, posuere justo. Phasellus elit lectus, venenatis eu velit eget, aliquet luctus neque. Duis tristique blandit lacus, nec rhoncus dui ornare vel. Nulla id fringilla justo,
in mattis nisi. Maecenas a dui tempus, rutrum odio sed, molestie turpis. Aliquam tempor leo sed ligula interdum iaculis sed ac nunc. Suspendisse sit amet porta tellus. Morbi et quam vestibulum, accumsan risus id, iaculis libero. Donec condimentum
dapibus elit, vel hendrerit lectus auctor vel. Vivamus vehicula, dolor eget lacinia sagittis, justo purus venenatis leo, vitae imperdiet nisi eros id leo. Quisque sed bibendum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Suspendisse tristique, metus ac suscipit consequat, metus enim iaculis nibh, efficitur dignissim lorem libero sed erat. Morbi in tortor ultrices leo finibus vestibulum. Donec eget lacinia enim. Mauris hendrerit commodo dapibus.
Sed vulputate est commodo, egestas arcu eu, tristique leo. Sed velit enim, fringilla non tristique malesuada, fringilla non erat. Nulla euismod in nisi non auctor. Maecenas in tempus magna. Maecenas at velit luctus, fringilla lacus in, scelerisque
magna. Pellentesque ac tempus risus, sit amet ultricies libero. Proin sed gravida augue, quis egestas enim. Suspendisse ac aliquet nibh, quis elementum elit. Vestibulum leo sapien, eleifend ut consectetur eu, mattis vel dolor. Integer nulla erat,
tempus nec quam eget, pharetra porta dui. In laoreet aliquam porttitor. Praesent tortor est, dignissim vel scelerisque ac, pellentesque a ipsum. Aenean maximus leo vel lacus mattis, sit amet dignissim enim sodales. Phasellus ac mauris sit amet ante
sollicitudin elementum. Donec quis maximus mi. Nullam vitae purus ac odio fermentum cursus et sed urna. Pellentesque condimentum tellus ex, et convallis felis eleifend at. Pellentesque et sem ac ipsum pellentesque sagittis. Quisque ut ipsum fermentum,
egestas leo ac, accumsan lacus. Pellentesque aliquet tellus vel tortor venenatis blandit. Etiam ultrices id magna ut tristique. Sed ac urna vel nibh auctor aliquet. Donec sollicitudin iaculis rutrum. Ut nec augue accumsan, dapibus dolor quis, finibus
nisi. Mauris lectus elit, efficitur ultricies sollicitudin nec, pretium sed dui. Phasellus sagittis iaculis ligula et iaculis. Aenean dictum nisl et odio pulvinar dictum. Phasellus condimentum massa ipsum, at congue quam egestas vitae. Integer enim
mauris, fringilla sit amet tempor scelerisque, tincidunt eget ligula. Proin condimentum rutrum maximus. Nunc tellus nisl, dictum vel fermentum ut, feugiat a nisi. Nam sed sapien sit amet elit egestas semper eu ut diam. Suspendisse blandit vitae metus
porttitor cursus. Vestibulum et gravida massa. Fusce in neque sit amet lacus luctus ornare at id augue. Nam at congue ligula. Quisque eu mollis dui, eu dictum justo. Maecenas nec placerat velit. Morbi placerat, diam eu dignissim dignissim, turpis
magna rhoncus lectus, ac interdum velit tortor sed tortor. Aliquam lobortis leo erat, vitae accumsan tortor tempus at. Sed bibendum vel justo id commodo. Nam ante nisl, consectetur a elit vel, imperdiet suscipit justo. Etiam sit amet cursus odio.
Nam id volutpat sapien. In pellentesque a nisi sit amet efficitur. Maecenas fringilla libero sit amet aliquet mattis. Nullam risus mauris, porttitor eget eros quis, commodo cursus elit. Integer eros justo, iaculis luctus quam vel, fermentum luctus
orci. Quisque aliquam rutrum facilisis.
</p>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
<button onClick="printPage();">print</button>
</div>
</div>
</div>A quick fix for this problem is hiding all of the content except your modal, adding the following CSS:
@media print {
body * {
display: none !important;
}
.modal,
.modal * {
display: block !important;
}
}
This will make everything inside the body invisible when you print and then you add your modal so that it becomes visible. If you don't want to always have this functionality, you can change the display based on a CSS class like .noPrint and .print and then add & remove those classes through JS when you want to print something.
Here's an example of the final functionality:
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
function printPage() {
window.print();
}.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
@media print {
.fakeBody * {
display: none !important;
}
.modal,
.modal * {
display: block !important;
}
.modal {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
/**Remove scrollbar for printing.**/
overflow: visible !important;
}
.modal-content {
visibility: visible !important;
/**Remove scrollbar for printing.**/
overflow: visible !important;
}
}<div class="fakeBody">
<button id="myBtn">Open Modal</button>
<p class="everything">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec justo sodales, rhoncus dui at, pretium nulla. Curabitur venenatis ut turpis quis viverra. Suspendisse ac nisi malesuada, aliquam lorem vel, pellentesque dolor. Maecenas dignissim ultrices
turpis ut eleifend. Sed volutpat nibh a tellus congue auctor. Sed scelerisque urna vitae tellus pulvinar porta at at est. Pellentesque sit amet facilisis mauris, vel dignissim felis. Mauris mattis nunc mauris, sed eleifend risus egestas vitae. Suspendisse
nec molestie lectus. Etiam at enim lacinia, sollicitudin odio id, posuere justo. Phasellus elit lectus, venenatis eu velit eget, aliquet luctus neque. Duis tristique blandit lacus, nec rhoncus dui ornare vel. Nulla id fringilla justo, in mattis nisi.
Maecenas a dui tempus, rutrum odio sed, molestie turpis. Aliquam tempor leo sed ligula interdum iaculis sed ac nunc. Suspendisse sit amet porta tellus. Morbi et quam vestibulum, accumsan risus id, iaculis libero. Donec condimentum dapibus elit, vel
hendrerit lectus auctor vel. Vivamus vehicula, dolor eget lacinia sagittis, justo purus venenatis leo, vitae imperdiet nisi eros id leo. Quisque sed bibendum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Suspendisse tristique, metus ac suscipit consequat, metus enim iaculis nibh, efficitur dignissim lorem libero sed erat. Morbi in tortor ultrices leo finibus vestibulum. Donec eget lacinia enim. Mauris hendrerit commodo dapibus. Sed vulputate est commodo,
egestas arcu eu, tristique leo. Sed velit enim, fringilla non tristique malesuada, fringilla non erat. Nulla euismod in nisi non auctor. Maecenas in tempus magna. Maecenas at velit luctus, fringilla lacus in, scelerisque magna. Pellentesque ac tempus
risus, sit amet ultricies libero. Proin sed gravida augue, quis egestas enim. Suspendisse ac aliquet nibh, quis elementum elit. Vestibulum leo sapien, eleifend ut consectetur eu, mattis vel dolor. Integer nulla erat, tempus nec quam eget, pharetra
porta dui. In laoreet aliquam porttitor. Praesent tortor est, dignissim vel scelerisque ac, pellentesque a ipsum. Aenean maximus leo vel lacus mattis, sit amet dignissim enim sodales. Phasellus ac mauris sit amet ante sollicitudin elementum. Donec
quis maximus mi. Nullam vitae purus ac odio fermentum cursus et sed urna. Pellentesque condimentum tellus ex, et convallis felis eleifend at. Pellentesque et sem ac ipsum pellentesque sagittis. Quisque ut ipsum fermentum, egestas leo ac, accumsan
lacus. Pellentesque aliquet tellus vel tortor venenatis blandit. Etiam ultrices id magna ut tristique. Sed ac urna vel nibh auctor aliquet. Donec sollicitudin iaculis rutrum. Ut nec augue accumsan, dapibus dolor quis, finibus nisi. Mauris lectus elit,
efficitur ultricies sollicitudin nec, pretium sed dui. Phasellus sagittis iaculis ligula et iaculis. Aenean dictum nisl et odio pulvinar dictum. Phasellus condimentum massa ipsum, at congue quam egestas vitae. Integer enim mauris, fringilla sit amet
tempor scelerisque, tincidunt eget ligula. Proin condimentum rutrum maximus. Nunc tellus nisl, dictum vel fermentum ut, feugiat a nisi. Nam sed sapien sit amet elit egestas semper eu ut diam. Suspendisse blandit vitae metus porttitor cursus. Vestibulum
et gravida massa. Fusce in neque sit amet lacus luctus ornare at id augue. Nam at congue ligula. Quisque eu mollis dui, eu dictum justo. Maecenas nec placerat velit. Morbi placerat, diam eu dignissim dignissim, turpis magna rhoncus lectus, ac interdum
velit tortor sed tortor. Aliquam lobortis leo erat, vitae accumsan tortor tempus at. Sed bibendum vel justo id commodo. Nam ante nisl, consectetur a elit vel, imperdiet suscipit justo. Etiam sit amet cursus odio. Nam id volutpat sapien. In pellentesque
a nisi sit amet efficitur. Maecenas fringilla libero sit amet aliquet mattis. Nullam risus mauris, porttitor eget eros quis, commodo cursus elit. Integer eros justo, iaculis luctus quam vel, fermentum luctus orci. Quisque aliquam rutrum facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec justo sodales, rhoncus dui at, pretium nulla. Curabitur venenatis ut turpis quis viverra. Suspendisse ac nisi malesuada, aliquam lorem vel, pellentesque dolor. Maecenas dignissim
ultrices turpis ut eleifend. Sed volutpat nibh a tellus congue auctor. Sed scelerisque urna vitae tellus pulvinar porta at at est. Pellentesque sit amet facilisis mauris, vel dignissim felis. Mauris mattis nunc mauris, sed eleifend risus egestas vitae.
Suspendisse nec molestie lectus. Etiam at enim lacinia, sollicitudin odio id, posuere justo. Phasellus elit lectus, venenatis eu velit eget, aliquet luctus neque. Duis tristique blandit lacus, nec rhoncus dui ornare vel. Nulla id fringilla justo,
in mattis nisi. Maecenas a dui tempus, rutrum odio sed, molestie turpis. Aliquam tempor leo sed ligula interdum iaculis sed ac nunc. Suspendisse sit amet porta tellus. Morbi et quam vestibulum, accumsan risus id, iaculis libero. Donec condimentum
dapibus elit, vel hendrerit lectus auctor vel. Vivamus vehicula, dolor eget lacinia sagittis, justo purus venenatis leo, vitae imperdiet nisi eros id leo. Quisque sed bibendum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Suspendisse tristique, metus ac suscipit consequat, metus enim iaculis nibh, efficitur dignissim lorem libero sed erat. Morbi in tortor ultrices leo finibus vestibulum. Donec eget lacinia enim. Mauris hendrerit commodo dapibus.
Sed vulputate est commodo, egestas arcu eu, tristique leo. Sed velit enim, fringilla non tristique malesuada, fringilla non erat. Nulla euismod in nisi non auctor. Maecenas in tempus magna. Maecenas at velit luctus, fringilla lacus in, scelerisque
magna. Pellentesque ac tempus risus, sit amet ultricies libero. Proin sed gravida augue, quis egestas enim. Suspendisse ac aliquet nibh, quis elementum elit. Vestibulum leo sapien, eleifend ut consectetur eu, mattis vel dolor. Integer nulla erat,
tempus nec quam eget, pharetra porta dui. In laoreet aliquam porttitor. Praesent tortor est, dignissim vel scelerisque ac, pellentesque a ipsum. Aenean maximus leo vel lacus mattis, sit amet dignissim enim sodales. Phasellus ac mauris sit amet ante
sollicitudin elementum. Donec quis maximus mi. Nullam vitae purus ac odio fermentum cursus et sed urna. Pellentesque condimentum tellus ex, et convallis felis eleifend at. Pellentesque et sem ac ipsum pellentesque sagittis. Quisque ut ipsum fermentum,
egestas leo ac, accumsan lacus. Pellentesque aliquet tellus vel tortor venenatis blandit. Etiam ultrices id magna ut tristique. Sed ac urna vel nibh auctor aliquet. Donec sollicitudin iaculis rutrum. Ut nec augue accumsan, dapibus dolor quis, finibus
nisi. Mauris lectus elit, efficitur ultricies sollicitudin nec, pretium sed dui. Phasellus sagittis iaculis ligula et iaculis. Aenean dictum nisl et odio pulvinar dictum. Phasellus condimentum massa ipsum, at congue quam egestas vitae. Integer enim
mauris, fringilla sit amet tempor scelerisque, tincidunt eget ligula. Proin condimentum rutrum maximus. Nunc tellus nisl, dictum vel fermentum ut, feugiat a nisi. Nam sed sapien sit amet elit egestas semper eu ut diam. Suspendisse blandit vitae metus
porttitor cursus. Vestibulum et gravida massa. Fusce in neque sit amet lacus luctus ornare at id augue. Nam at congue ligula. Quisque eu mollis dui, eu dictum justo. Maecenas nec placerat velit. Morbi placerat, diam eu dignissim dignissim, turpis
magna rhoncus lectus, ac interdum velit tortor sed tortor. Aliquam lobortis leo erat, vitae accumsan tortor tempus at. Sed bibendum vel justo id commodo. Nam ante nisl, consectetur a elit vel, imperdiet suscipit justo. Etiam sit amet cursus odio.
Nam id volutpat sapien. In pellentesque a nisi sit amet efficitur. Maecenas fringilla libero sit amet aliquet mattis. Nullam risus mauris, porttitor eget eros quis, commodo cursus elit. Integer eros justo, iaculis luctus quam vel, fermentum luctus
orci. Quisque aliquam rutrum facilisis.
</p>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
<button onClick="printPage();">print</button>
</div>
</div>
</div>