Build a Custom PDF Popup or Modal IFrame Viewer in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

Welcome folks today in this blog post we will be building a custom pdf popup or modal iframe viewer in javascript. All the full source code of the application is shown below.

 

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<div class="container">
        <div class="card">
            <div class="bgImage"
                style="background-image:url(http://digiartsplanet.com/wp-content/uploads/2018/10/2.png)">
                <div class="button" data-href="http://www.africau.edu/images/default/sample.pdf">Show Pdf 1</div>
            </div>
        </div>
        <div class="card">
            <div class="bgImage"
                style="background-image:url(http://digiartsplanet.com/wp-content/uploads/2018/10/1.png)">
                <div class="button" data-href="http://www.africau.edu/images/default/sample.pdf">Show Pdf 2 </div>
            </div>
        </div>
    </div>
    <!-- Container End -->
    <div class="popup">
        <div class="popupIn">
            <div class="close">
                x
            </div>
            <div class="frameSide">
                <iframe class="myIframe" src=""></iframe>
            </div>
        </div>
    </div>

 

 

 

style.css

 

 

.container {
            display: flex;
            width: 1170px;
            margin: 0 auto;
        }

        .container .card {
            width: 33%;
            margin: 15px;
        }

        .container .card .bgImage {
            height: 250px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container .card .bgImage .button {
            color: #333;
            font-size: 50px;
            background: #fff;
            padding: 8px 12px;
            border-radius: 15px;
        }

        /* Pop Up */
        .popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: hsla(0, 0%, 0%, 0.4196078431372549);
            display: flex;
            align-items: center;
            justify-content: center;
            display: none;
        }

        .popup .popupIn {
            width: 680px;
            height: 680px;
            position: relative;
            max-height: 70%;
            max-width: 80%
        }

        .popup .popupIn .frameSide,
        .popup .popupIn .frameSide iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .close {
            position: absolute;
            right: 0;
            top: -40px;
            background: #fff;
            z-index: 99;
            padding: 5px 8px;
            border-radius: 5px;
            line-height: 14px;
        }

 

See also  How to Convert HTML to PDF Using HTML2PDF.js Library in Browser Full Project For Beginners

 

 

script.js

 

 

 

var myButton = document.querySelectorAll('.button');
    var closeButton = document.querySelectorAll('.close');
    var popup = document.querySelectorAll('.popup');
    var popupInSide = document.querySelectorAll('.myIframe');

    for (var i = 0; i < myButton.length; i++) {
        myButton[i].addEventListener('click', function (event) {
            var buttonPDFLink = this.getAttribute("data-href");
            for (var i = 0; i < popup.length; i += 1) {
                popup[i].style.display = 'flex';
            }
            for (var i = 0; i < popupInSide.length; i += 1) {
                // The url I throw into the iframe is blocked because I don't use ssl. I used google doc viever instead
                popupInSide[i].setAttribute("src", "https://docs.google.com/gview?url=" + buttonPDFLink + "&embedded=true")
            }
        });
    }
    // close button side
    for (var i = 0; i < closeButton.length; i++) {
        closeButton[i].addEventListener('click', function (event) {
            for (var i = 0; i < popup.length; i += 1) {
                popupInSide[i].removeAttribute("src");
                popup[i].style.display = 'none';
            }
        });
    }

Leave a Reply