打开叠加层并按下打印按钮时，是否可以在全屏叠加中打印文本？目前似乎排除了叠加层中的某些文本，当按下打印按钮时，它只打印一页。
如果可以提供一个新的小提琴，我将非常感激，因为我还不熟悉编码。
谢谢！
body {
margin: 0;
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #fff;
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 2%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 2%;
right: 45px;
font-size: 60px !important;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="overlay" id="myNav">
<a class="closebtn" href="javascript:void(0)" onclick=
"closeNav()">×</a>
<div class="overlay-content">
<button onclick="myFunction2()">Print Contents of Overlay</button>
<hr>
<script>
function myFunction2() {
window.print();
}
</script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
iaculis, arcu at convallis mollis, urna lectus auctor diam, eget
cursus ante quam at dui. Vivamus feugiat vel odio nec sagittis.
Donec volutpat odio sit amet turpis semper, laoreet ullamcorper
neque maximus. Maecenas condimentum eget arcu vitae lacinia. Nulla
ut quam a ante tristique tristique. Nulla placerat sem sit amet
orci mattis, eu dapibus risus tristique. Quisque finibus odio eu
sodales gravida. Donec mollis scelerisque consequat. Praesent eget
pharetra arcu, eget cursus neque. Etiam pretium aliquam metus, sit
amet lobortis velit consectetur non. Nullam placerat diam leo, non
aliquam mi laoreet in. Suspendisse potenti. In hac habitasse platea
dictumst. In in porttitor risus. Ut porta enim vitae arcu pretium
hendrerit. Cras efficitur, est vel placerat faucibus, nunc felis
consequat quam, sed congue arcu eros quis quam. Fusce tempor
rhoncus suscipit. Morbi ac eros id sapien suscipit dictum laoreet
non elit. Aliquam auctor, risus eget posuere iaculis, enim metus
bibendum nisi, eu finibus est justo et velit. Suspendisse lacinia
sit amet odio et lacinia. Praesent lectus ipsum, tempus in nibh at,
egestas facilisis justo. Donec ac lectus mauris. Fusce a bibendum
magna. Vestibulum feugiat risus quis rutrum commodo. Donec erat
ligula, semper sodales ex eu, sollicitudin blandit tellus. Quisque
massa quam, fringilla suscipit tellus sed, porta suscipit augue.
Sed feugiat commodo leo, sodales aliquet sem aliquet non. Ut
finibus fringilla mi ut maximus. Nunc tincidunt, ipsum sit amet
auctor fringilla, nulla felis bibendum tellus, eget bibendum velit
nibh at quam. Fusce faucibus ipsum arcu. Nunc volutpat risus orci,
vel maximus nibh egestas luctus. Morbi ut volutpat sem, nec
porttitor purus. Vivamus non molestie turpis, nec maximus lorem.
Praesent id ex ac tellus vehicula sagittis. Quisque ultrices
venenatis augue quis gravida. Maecenas sit amet libero est. Sed
quis ante magna. Pellentesque eleifend, orci quis pellentesque
laoreet, massa felis faucibus dui, id pellentesque metus urna ac
orci. Phasellus sit amet lectus quam. Duis mollis a dolor eget
feugiat. Cras gravida libero lacus, id posuere augue congue vel.
Nullam eget condimentum orci, quis tempor neque. Praesent nec
iaculis ligula. Donec ante lectus, elementum et purus a, convallis
rutrum leo. Morbi nisl massa, iaculis molestie odio sed, malesuada
suscipit ligula. Phasellus congue orci luctus, sollicitudin tortor
nec, scelerisque felis. In quis feugiat dolor, in dignissim dolor.
Sed imperdiet dui sed mattis ullamcorper. Maecenas quis lectus ut
nisl auctor luctus. Aenean at pulvinar leo. Fusce mollis
sollicitudin ante sit amet luctus. Vestibulum interdum risus et
placerat malesuada. In id ultricies erat, eu mattis libero. Sed a
consequat dui, pulvinar cursus justo. Vivamus mollis egestas diam
quis varius. Proin quis neque elit. Nam at magna sed justo congue
posuere. In ut magna in eros facilisis dapibus. Cras libero nisi,
iaculis nec gravida fermentum, porttitor ac enim.Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Aenean iaculis, arcu at
convallis mollis, urna lectus auctor diam, eget cursus ante quam at
dui. Vivamus feugiat vel odio nec sagittis. Donec volutpat odio sit
amet turpis semper, laoreet ullamcorper neque maximus. Maecenas
condimentum eget arcu vitae lacinia. Nulla ut quam a ante tristique
tristique. Nulla placerat sem sit amet orci mattis, eu dapibus
risus tristique. Quisque finibus odio eu sodales gravida. Donec
mollis scelerisque consequat. Praesent eget pharetra arcu, eget
cursus neque. Etiam pretium aliquam metus, sit amet lobortis velit
consectetur non. Nullam placerat diam leo, non aliquam mi laoreet
in. Suspendisse potenti. In hac habitasse platea dictumst. In in
porttitor risus. Ut porta enim vitae arcu pretium hendrerit. Cras
efficitur, est vel placerat faucibus, nunc felis consequat quam,
sed congue arcu eros quis quam. Fusce tempor rhoncus suscipit.
Morbi ac eros id sapien suscipit dictum laoreet non elit. Aliquam
auctor, risus eget posuere iaculis, enim metus bibendum nisi, eu
finibus est justo et velit. Suspendisse lacinia sit amet odio et
lacinia. Praesent lectus ipsum, tempus in nibh at, egestas
facilisis justo. Donec ac lectus mauris. Fusce a bibendum magna.
Vestibulum feugiat risus quis rutrum commodo. Donec erat ligula,
semper sodales ex eu, sollicitudin blandit tellus. Quisque massa
quam, fringilla suscipit tellus sed, porta suscipit augue. Sed
feugiat commodo leo, sodales aliquet sem aliquet non. Ut finibus
fringilla mi ut maximus. Nunc tincidunt, ipsum sit amet auctor
fringilla, nulla felis bibendum tellus, eget bibendum velit nibh at
quam. Fusce faucibus ipsum arcu. Nunc volutpat risus orci, vel
maximus nibh egestas luctus. Morbi ut volutpat sem, nec porttitor
purus. Vivamus non molestie turpis, nec maximus lorem. Praesent id
ex ac tellus vehicula sagittis. Quisque ultrices venenatis augue
quis gravida. Maecenas sit amet libero est. Sed quis ante magna.
Pellentesque eleifend, orci quis pellentesque laoreet, massa felis
faucibus dui, id pellentesque metus urna ac orci. Phasellus sit
amet lectus quam. Duis mollis a dolor eget feugiat. Cras gravida
libero lacus, id posuere augue congue vel. Nullam eget condimentum
orci, quis tempor neque. Praesent nec iaculis ligula. Donec ante
lectus, elementum et purus a, convallis rutrum leo. Morbi nisl
massa, iaculis molestie odio sed, malesuada suscipit ligula.
Phasellus congue orci luctus, sollicitudin tortor nec, scelerisque
felis. In quis feugiat dolor, in dignissim dolor. Sed imperdiet dui
sed mattis ullamcorper. Maecenas quis lectus ut nisl auctor luctus.
Aenean at pulvinar leo. Fusce mollis sollicitudin ante sit amet
luctus. Vestibulum interdum risus et placerat malesuada. In id
ultricies erat, eu mattis libero. Sed a consequat dui, pulvinar
cursus justo. Vivamus mollis egestas diam quis varius. Proin quis
neque elit. Nam at magna sed justo congue posuere. In ut magna in
eros facilisis dapibus. Cras libero nisi, iaculis nec gravida
fermentum, porttitor ac enim.</p>
</div>
</div><span onclick="openNav()" style="cursor:pointer">Click to open
overlay</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>
请注意：部分代码部分由W3Schools提供。
答案 0 :(得分：2)
我已经更换了打印功能，如下所示。更新了fiddle。
function myFunction2() {
var printContents = document.getElementsByClassName('overlay-content')[0].innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}