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>

    <meta name="viewport" content="width=device-width, initial-scale=1">
        body {

        .popupMainContainer {

        .popupContainer {
            border1px solid #888;

        .closePopup {
            margin-30px -30px 0 0;

        .closePopup:focus {


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


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

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

        openPopup.onclick = function () {
   = "block";

        closeBtn.onclick = function () {
   = "none";

        window.onclick = function (event) {
            if ( == popupss) {
       = "none";



You will find the result like the screenshot below:

No comments:

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

Copyright Reserved to Anything Learn. Powered by Blogger.