How to Create Responsive Modal Images using CSS & JavaScript?

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);

Output:

Modal using Javascript,HTML and CSS

How to Create Responsive Modal Images using CSS & JavaScript?

S

sakshi_srivastava

Improve

Article Tags :

Similar Reads

How to create Popup Box using HTML CSS and JavaScript?

Creating a popup box with HTML, CSS, and JavaScript improves user interaction on a website. A responsive popup appears when a button is clicked, featuring an HTML structure, CSS for styling, and JavaScript functions to manage visibility.ApproachCreate the Popup structure using HTML tags, Some tags a

How to create a Popup Form using HTML CSS and JavaScript ?

To create a popup form using JavaScript, you can design a hidden overlay that becomes visible when triggered. We will use HTML for form elements, CSS for styling, and JavaScript to toggle the visibility of the overlay. This allows for a user-friendly and interactive way to display forms on your webp

How to Create Popup Box using HTML and CSS?

Popup boxes are widely used in web design, with nearly 80% of modern websites utilizing them for alerts, forms, confirmations, or user guidance. They enhance interactivity and improve user experience. Below are three common methods to create a popup box using only HTML and CSS:1. Using Display Prope

How to create Cookie Consent Box using HTML CSS and JavaScript ?

In this article, we will see how cookies are stored using the cookie consent box using HTML, CSS, & JavaScript.Cookies are small pieces of data that are stored on a user's device while browsing the website. Cookies are used to store information for faster access to data and provide a better user

How to Create Responsive Modal Images using CSS & JavaScript?

Modal images provide an interactive way to display larger versions of images without navigating away from the current page and it takes user attention and users can stay on our website some more time. PreviewApproachFirst, create a basic HTML layout for your image gallery and modal pop-ups. Each ima

How to Create Image Lightbox Gallery using HTML CSS and JavaScript ?

A lightbox gallery is basically used to view the gallery images in detail specifically. You can code the JavaScript to do so but also we can use some downloaded JS and CSS. In this article, we will download the lightbox and attach the JS and CSS files into our code. For our own design satisfaction,