Print text in a full-screen overlay?

Is it possible to print text in a full-screen overlay, when the overlay is open, and a print button is pressed? It seems currently that some of the text within the overlay is excluded and when the print button is pressed, it only prints one page.

Fiddle

If a new fiddle could be provided, it would be very much appreciated, as I am still new to coding.

Thank You!

   

    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>


Please Note: Some parts of code is courtesy of W3Schools.

Answers 1

  • I have replaced the print function as below. Updated 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;
    }
    

Related Articles