Create Modal Box in HTML and JavaScript or CSS

makenzi....

SOLVED CLOSED ACTIVE ANSWERED
User: makenzi.exc
Posted: on Mar 15, 2025 09:14 AM
Forum: HTML and CSS
Replies: 1
Views: 27

Hi,

Please help me on following.

How do i create a Modal Box in HTML and JavaScript or CSS?

The modal dialog box window should display on top of the current page.

Download FREE API for Word, Excel and PDF in ASP.Net

Mudassar

0 1

Reply
User: Mudassar
Replied: on Mar 15, 2025 09:15 AM
Report

Hi makenzi.exc,

Refer below example.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
    </style>
</head>
<body>
    <input id="btnOpen" type="button" value="Open Modal" onclick="OpenModal()" />
    <!-- The Modal -->
    <div id="modal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
            <span class="close" onclick="CloseModal()">&times;</span>
            <p>Welcome to ASPSnippets</p>
        </div>
    </div>
    <style type="text/css">
        .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
        .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; }
        .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
        .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }
    </style>
    <script type="text/javascript">
        // Reference modal.
        var modal = document.getElementById("modal");

        // Open Modal.
        function OpenModal() {
            modal.style.display = "block";
        };

        // Close Modal.
        function CloseModal() {
            modal.style.display = "none";
        };

        // Close Modal when click anywhere outside modal.
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        };
    </script>
</body>
</html>

Demo

Screenshot

Downloads

Download Sample

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Description

Description is required.

Create Modal Box in HTML and JavaScript or CSS

Company

Explore

Follow us

Contact Us