Ads Top

How to create custom popup in Javascript?

Javascript popups:


Basically, it's using onclick method with javascript and also using CSS display none property then it’s work both in one time. I am giving below code:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-familyArialHelveticasans-serif;
        }

        .popupMainContainer {
            displaynone;
            positionfixed;
            z-index1;
            padding-top100px;
            left0;
            top0;
            width100%;
            height100%;
            overflowauto;
            background-colorrgb(000);
            background-colorrgba(0000.4);
        }

        .popupContainer {
            background-color#fefefe;
            marginauto;
            padding20px;
            border1px solid #888;
            width80%;
        }

        .closePopup {
            color#fff;
            floatright;
            font-size28px;
            font-weightbold;
            background#f00;
            border-radius50%;
            width30px;
            height30px;
            text-aligncenter;
            line-height30px;
            margin-30px -30px 0 0;
        }

        .closePopup:hover,
        .closePopup:focus {
            color#fff;
            text-decorationnone;
            cursorpointer;
        }
    </style>
</head>

<body>

    <h2>Popup Example</h2>

    <button id="btnPopup">Open Popup</button>

    <div id="myPopup" class="popupMainContainer">

        <div class="popupContainer">
            <div class="closePopup">&times;</div>
            <p>Some text in the Popups...</p>
        </div>

    </div>

    <script>
        var popupss = document.getElementById("myPopup");
        var openPopup = document.getElementById("btnPopup");

        var closeBtn = document.getElementsByClassName("closePopup")[0];

        openPopup.onclick = function () {
            popupss.style.display = "block";
        }

        closeBtn.onclick = function () {
            popupss.style.display = "none";
        }

        window.onclick = function (event) {
            if (event.target == popupss) {
                popupss.style.display = "none";
            }
        }
    </script>

</body>

</html>

You will find the result like the screenshot below:

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.