Building a Modal with HTML, CSS and JavaScript

CSS

Frontend Development

HTML

JavaScript

Tutorial

Web Development

Building a Modal with HTML, CSS and JavaScript

A modal is very widely used in web development as a versatile UI component for displaying content or messages without redirecting users to another page. It appears as a pop-up window that overlays the main content, making it perfect for alerts, forms, image galleries, and more, all while maintaining an interactive and seamless user experience.

The plan

The implementation

Let’s start by creating an HTML file, I named mine index.html, and put some basic structure to begin with.

We’ll have a <h1> tag instructing the user to click the button to open the modal, and the button that, when clicked, will open the modal.

1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <title>How to create a custom modal</title>
5
    </head>
6
    <body>
7
        <h1>Click the button to open the modal</h1>
8
        <button id="btnModal">Open modal</button>
9
    </body>
10
</html>

Now we’ll add the HTML for the modal. It will be represented by a div with an id=modal and it will contain an header div for the modal title and close button and the content of the modal.

We will also add some CSS classes and IDs for styling and DOM manipulation with JavaScript.

1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <title>How to create a custom modal</title>
5
    </head>
6
    <body>
7
        <h1>Click the button to open the modal</h1>
8
        <button id="btnModal">Open modal</button>
9
        <div id="modal">
10
            <div class="modal-content">
11
                <div class="modal-header">
12
                    <span id="btnClose">&times;</span>
13
                    <h2>Modal Header</header>
14
                </div>
15
                <p>Some content in the modal...</p>
16
            </div>
17
        </div>
18
    </body>
19
</html>

Let’s add some styles now to finish our basic setup. Create a file called styles.css and type the following code.

1
body {
2
    display: flex;
3
    flex-direction: column;
4
    justify-content: center;
5
    align-items: center;
6
    width: 100%;
7
    height: 100vh;
8
    margin: 0;
9
}

Now that we have our HTML structure, we can start adding some styling and interactivity.

If you try the code that we have so far, the modal is being shown under the <button id="btnModal">Open modal</button>, as it should, because we are missing the styles to hide it.

1
/* ... (previous code) */
2
#modal {
3
    display: none;
4
    position: absolute;
5
    display: none;
6
    position: absolute;
7
    top: 0;
8
    bottom: 0;
9
    left: 0;
10
    right: 0;
11
    height: fit-content;
12
    width: fit-content;
13
    margin: auto;
14
    z-index: 1;
15
    background-color: white;
16
    border-radius: 10px;
17
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
18
}
19

20
#button-close {
21
    font-size: 40px;
22
    cursor: pointer;
23
}
24

25
.modal-content {
26
    padding: 20px;
27
}
28

29
.modal-header {
30
    display: flex;
31
    align-items: center;
32
    border-bottom: 1px solid #333333;
33
}
34

35
.modal-header h2 {
36
    margin-left: 15px;
37
}

Here, we style our modal, by hiding it by default and positioning it in the middle of the screen, in front of all other content, and with a box-shadow to make it more noticeable; we also style the modal components, like the close button and the header.

Let’s go ahead and create a JavaScript file called script.js and write the following code.

1
let btnModal = document.getElementById("btnModal");
2

3
btn.onclick = function() {
4
    let modal = document.getElementById("modal");
5
    modal.style.display = "block";
6
}
7

8
let btnClose = document.getElementById("btnClose");
9

10
btnClose.onclick = function() {
11
    let modal = document.getElementById("modal");
12
    modal.style.display = "none";
13
}

Using plain JavaScript, we get our buttons (the button to open the modal, and the button to close it), and then attach onclick event listeners that call a function when the user clicks on them.

Each function does very similar things, they get the modal and change its CSS display property; block to show the modal and none to hide it.

Everything is pretty much done, but we can still improve it by adding a background overlay that stays in front of the page’s content and behind the modal. This will highlight our modal and make it more noticeable.

1
<!-- ... (previous code) -->
2
<button id="btnModal">Open Modal</button>
3
<div id="overlay"></div>
4
<div id="modal">
5
<!-- ... -->

Our changes are just to add an empty <div> that represents the overlay. Now we need to style it in order for it to actually be an overlay.

1
/* ... (previous code) */
2
#overlay {
3
    display: none;
4
    background-color: rgba(0, 0, 0, 0.5);
5
    position: fixed;
6
    top: 0;
7
    left: 0;
8
    width: 100%;
9
    height: 100%;
10
    z-index: 0;
11
}

By adding a fixed position at top: 0 and left: 0 with width and height properties with 100% value, we make the sure that the overlay occupies the whole page, just like we wanted.

1
// ... (previous code)
2
btnModal.onclick = function() {
3
    let overlay = document.getElementById("overlay");
4
    overlay.style.display = "block";
5
// ...
6
}
7
btnClose.onclick = function() {
8
    let overlay = document.getElementById("overlay");
9
    overlay.style.display = "none";
10
// ...
11
}

We use the same logic, that we used to open the modal, to show the overlay: making the display property have a block value when the modal opens and changing it to none when the modal closes.

After these changes, if you try this code, you’ll see a greyish background when you click the button to open the modal.

And that’s it, we have a functioning modal built with plain HTML, CSS, and JavaScript.

Hedegare's Blog

Building - Learning - Optimizing - Growing

Building a Modal with HTML, CSS and JavaScript

The plan

The implementation

The recap