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.
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()">×</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
© COPYRIGHT 2025 ASPSnippets.com ALL RIGHTS RESERVED.