In this example, we will learn how to create a Modal Box using HTML, CSS, and Javascript. A modal is a dialog box that is displayed on top of the screen. We will be creating a modal using HTML, CSS, and JavaScript.
Approach: First, we will create a button, and when the user clicks on the button, the modal box will open. A click event listener will be attached to this button so that when it is clicked our modal opens up. The modal will have two parts, the overlay and the modal body and the modal initially will be hidden by setting the display as none. The Modal’s body will have a title, content, and a button to close the Modal. Additionally, this modal can be closed by clicking on the overlay part of the modal as well. Click event listeners will be attached to the close button inside the modal and the overlay wrapper so that whenever these two are clicked we will again hide the modal by using the display none property.
Example: In this example, we will use the above approach.
HTML
<!DOCTYPE html><html><head> <link rel="stylesheet" href="styles.css" /> <title>Page Title</title></head><body> <div class="open-modal-btn-wrapper"> <button class="open-modal-btn"> Open Modal </button> </div> <div class="modal-overlay hide"> <div class="modal-wrapper"> <div class="close-btn-wrapper"> <button class="close-modal-btn"> Close </button> </div> <h1>neveropen</h1> <div class="modal-content"> Greetings from neveropen </div> </div> </div> <script src="index.js"></script></body></html> |
CSS
.modal-overlay { background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; right: 0;}.modal-wrapper { width: 300px; height: 300px; background: ghostwhite; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}.open-modal-btn-wrapper { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}.close-modal-btn,.open-modal-btn { padding: 8px; background: slateblue; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 15px; color: ghostwhite; font-weight: 5px; margin-left: auto; margin-top: 10px; margin-right: 10px; cursor: pointer;}.close-btn-wrapper { display: flex;}.modal-content { margin: 20px auto; max-width: 210px; width: 100%;}.hide { display: none;}h1 { text-align: center;} |
Javascript
const openBtn = document.querySelector(".open-modal-btn");const modal = document.querySelector(".modal-overlay");const closeBtn = document.querySelector(".close-modal-btn");function openModal() { modal.classList.remove("hide");}function closeModal(e, clickedOutside) { if (clickedOutside) { if (e.target.classList.contains("modal-overlay")) modal.classList.add("hide"); } else modal.classList.add("hide");}openBtn.addEventListener("click", openModal);modal.addEventListener("click", (e) => closeModal(e, true));closeBtn.addEventListener("click", closeModal); |
Output:
Modal using Javascript,HTML and CSS