Ah ok I see the problem. I forgot to remove the position:fixed from the modal when printing as position:fixed never escapes the viewport so will only print on one page. Change the position:fixed to position:absolute and we should be good to go.
I also negated the line-height to kill some white space The css now looks like this:
@media print {
html,body{background:#fff!important;color:#000!important;}
body.modal-visible * {visibility:hidden!important;height:0;overflow:hidden;line-height:0;}
body.modal-visible .modal-overlay, body.modal-visible .modal-overlay * {visibility:visible!important;height:auto;overflow:visible;line-height:normal;}
.modal-overlay,.modal-inner,.modal-container {display:block;width:auto;height:auto;background:#fff;}
.modal-container{border:none;width:auto;height:auto;min-width:0;max-width:none;max-height:none;border-radius:0;overflow:visible}
.modal-header{display:none;}
.modal-overlay{position:absolute;top:0;left:0;}
}
We can simplify the whole thing if you put a wrapper around the whole page content but keep the modals separate and then you can just set the wrapper to display:none which will allow the modal to be styled without any cascading styles (apart from the original styles of course.)
This simplifies the process a little and makes it easier to manage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modal demo</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.modal-overlay {
position: fixed;
top:0;
left:0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
opacity: 0;
transition: opacity .2s ease;
}
.modal-overlay.active {
display: table;
}
.modal-overlay.visible {
opacity: 1;
}
.modal-inner {
display: table-cell;
vertical-align: middle;
}
.modal-container {
margin: 0 auto;
width: 50%;
min-width: 750px;
max-width: 850px;
max-height: 600px;
overflow: auto;
border: 1px solid;
background: #fff;
border-radius: 5px;
}
.modal-header {
text-align: right;
}
.modal-close {
margin-right: .25em;
color: inherit;
text-decoration: none;
font-size: 2rem;
font-weight: bold;
}
.modal-content {
padding: 0 10px;
}
.modal-content p {
margin: 0 0 1em;
}
.hide {
display: none;
}
p.open {
margin: 1em;
text-align: center;
font-size: 1em;
font-weight: 600;
color: #4c659b;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
}
@media print {
html,body{background:#fff!important;color:#000!important;}
body.modal-visible .wrap {display:none!important}
body.modal-visible .modal-overlay, body.modal-visible .modal-overlay * {height:auto;overflow:visible;}
.modal-overlay,.modal-inner,.modal-container {display:block;width:auto;height:auto;background:#fff;}
.modal-container{border:none;width:auto;height:auto;min-width:0;max-width:none;max-height:none;border-radius:0;overflow:visible}
.modal-header{display:none;}
.modal-overlay{position:static;}
}
</style>
</head>
<body>
<div class="wrap"> <a href="#" data-open-modal data-modal="1">Modal 1</a><br>
<a href="#" data-open-modal data-modal="2">Modal 2</a>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
<!-- keep modals outside of wrap -->
<div class="modal-overlay">
<div class="modal-inner">
<div class="modal-container">
<div class="modal-header"> <a href="#" class="modal-close">×</a> </div>
<div class="modal-content-1 hide">
<p> FirstHello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1</p>
<p>Hello from modal 1 last</p>
</div>
<div class="modal-content-2 hide">
<p>First Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2</p>
<p>Hello from modal 2 last</p>
</div>
</div>
</div>
</div>
<script>
window.onload = function () {
var openModalLinks = Array.prototype.slice.call(document.querySelectorAll('[data-open-modal]'));
var closeModal = document.querySelector('.modal-close');
var modalOverlay = document.querySelector('.modal-overlay');
var modalInner = document.querySelector('.modal-inner');
var modalContent = document.querySelector('.modal-inner');
var modalContent = Array.prototype.slice.call(document.querySelectorAll('div[class^="modal-content-"]'));
var handleShowModal = function (id) {
document.querySelector('body').classList.add('modal-visible');
modalOverlay.classList.add('visible');
modalOverlay.querySelector('.modal-content-' + id).classList.remove('hide');
}
var handleHideModal = function (event) {
modalOverlay.classList.remove('active');
}
var handleOpenModal = function (event) {
var id = event.target.getAttribute('data-modal');
event.preventDefault();
modalOverlay.classList.add('active');
window.setTimeout(handleShowModal(id));
}
var handleCloseModal = function (event) {
if (event.target !== event.currentTarget) {
return;
}
event.preventDefault();
document.querySelector('body').classList.remove('modal-visible')
modalOverlay.classList.remove('visible');
modalContent.forEach(function(modal) { modal.classList.add('hide') });
modalOverlay.addEventListener(
'transitionend',
handleHideModal, {
once: true,
passive: true
}
);
}
openModalLinks.forEach(function(link) { link.addEventListener('click', handleOpenModal) });
closeModal.addEventListener('click', handleCloseModal);
modalInner.addEventListener('click', handleCloseModal);
}
</script>
</body>
</html>
That would be my preferred approach if the modals are separate from .wrap and not entwined in the html.
You have to remember with print stylesheets to undo any floating or positioning or fixed height and widths etc and try and simplify things for print.
