window.print() 在每一页上重复模态
window.print() repeating modal on every page
我正在尝试使用 window.print() 命令打印模态。我面临的问题是，例如。模态上的内容有 1 页长，但是当我打印时，它显示 2 页，在下一页上重复相同的内容，即模态被打印两次。请建议如何防止这种情况。下面是我用来在多页上打印长内容的css。
@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;
}
}
当有打印屏幕时，它总是显示所有 html 内容，当内容顶部有模态时，window.print() 将根据需要多次复制模态为了覆盖它后面的所有内容。
因此，如果您的内容需要 2 页才能显示所有内容，而您的模态框只有 1 页，它会复制模态框，使其始终位于内容之上。
这是您遇到的问题的示例：
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>
此问题的快速解决方法是隐藏除模态框以外的所有内容，添加以下内容 CSS:
@media print {
body * {
display: none !important;
}
.modal,
.modal * {
display: block !important;
}
}
这将使主体内部的所有内容在打印时不可见，然后添加模态以使其可见。如果您不想始终拥有此功能，您可以根据 CSS class 更改显示，例如 .noPrint 和 .print，然后添加和删除那些 class当你想打印一些东西时通过 JS 执行。
这是最终功能的示例：
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>
我正在尝试使用 window.print() 命令打印模态。我面临的问题是，例如。模态上的内容有 1 页长，但是当我打印时，它显示 2 页，在下一页上重复相同的内容，即模态被打印两次。请建议如何防止这种情况。下面是我用来在多页上打印长内容的css。
@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;
}
}
当有打印屏幕时，它总是显示所有 html 内容，当内容顶部有模态时，window.print() 将根据需要多次复制模态为了覆盖它后面的所有内容。
因此，如果您的内容需要 2 页才能显示所有内容，而您的模态框只有 1 页，它会复制模态框，使其始终位于内容之上。
这是您遇到的问题的示例：
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>
此问题的快速解决方法是隐藏除模态框以外的所有内容，添加以下内容 CSS:
@media print {
body * {
display: none !important;
}
.modal,
.modal * {
display: block !important;
}
}
这将使主体内部的所有内容在打印时不可见，然后添加模态以使其可见。如果您不想始终拥有此功能，您可以根据 CSS class 更改显示，例如 .noPrint 和 .print，然后添加和删除那些 class当你想打印一些东西时通过 JS 执行。
这是最终功能的示例：
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>