How To Create a Modal Box

A modal is a dialog box/popup window that is displayed on top of the current page:

<style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
        /* The Modal (background) */
       
        .modal {
            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.78);
        }
        /* Modal Content */
       
        .modal-content {
            background-color: #893;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        /* The Close Button */
       
        .close {
            color: #aaaaaa;
            float: right;
            background: #fff;
            width: 2rem;
            height: 2rem;
            font-size: 28px;
            border-radius: 50%;
            text-align: center;
            font-weight: bold;
        }
       
        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <h2>This is Modal Sample you can modify</h2>

    <!-- Trigger/Open The Modal -->
    <button id="myBtn">Open Modal</button>

    <!-- The Modal -->
    <div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <img style="width:90%" src="https://optimistaker.com/wp-content/uploads/2017/12/I-love-free-images.jpg">
            <p>Some text in the Modal..</p>
        </div>

    </div>

    <script>
        // Get the modal
        var modal = document.getElementById("myModal");

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks the button, open the modal
        btn.onclick = function() {
            modal.style.display = "block";
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>

Comments