Home custom popups javascript popup Popup How to create custom popup in Javascript?

How to create custom popup in Javascript?

by Sheo Sagar 6:00 AM

Read

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-family: Arial, Helvetica, sans-serif;

}

        .popupMainContainer {

            display: none;

            position: fixed;

            z-index: 1;

            padding-top: 100px;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            overflow: auto;

            background-color: rgb(0, 0, 0);

            background-color: rgba(0, 0, 0, 0.4);

}

        .popupContainer {

            background-color: #fefefe;

            margin: auto;

            padding: 20px;

            border: 1px solid #888;

            width: 80%;

}

        .closePopup {

            color: #fff;

            float: right;

            font-size: 28px;

            font-weight: bold;

            background: #f00;

            border-radius: 50%;

            width: 30px;

            height: 30px;

            text-align: center;

            line-height: 30px;

            margin: -30px -30px 0 0;

}

        .closePopup:hover,

        .closePopup:focus {

            color: #fff;

            text-decoration: none;

            cursor: pointer;

}

    </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:

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments ( Atom )