How to Create a Modal Box using HTML CSS and JavaScript?

Last Updated : 10 Oct, 2024

We will learn how to create a modal dialog box using HTML, CSS, and JavaScript. A modal is a pop-up dialog that appears on top of the main content and requires the user to interact with it before returning to the main screen.

Approach to Create Modal Box

HTML Structure:

Create a button that opens the modal.
Design the modal with two main parts: the overlay and the modal content.
Add a title, content, and a close button to the modal.

CSS Styling:

Style the modal to appear centered on the screen.
Initially set the modal to be hidden by using display: none.
Style the overlay to cover the entire viewport.

JavaScript Functionality:

Add event listeners to open the modal when the button is clicked.
Add event listeners to close the modal when the close button or overlay is clicked.

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>GeeksforGeeks</h1>
            <div class="modal-content">
                Greetings from GeeksforGeeks
            </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);