Make Pop-Up Modal Window In Vanilla JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-08-22 11:50:36

---
canonical_url: https://softauthor.com/make-custom-popup-modal-window-in-vanilla-javascript/
---

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Custom-Pop-up-Modal-Window-JavaScript-Open-Close-Modal-Window-on-Button-Click-6.gif)

Learn how to create a simple responsive **pop-up modal window** using **Vanilla JavaScript** along with **HTML** and **CSS **with a bit of **Flexbox**.

- [Create A Button That Opens Pop Up Modal Window](https://softauthor.com/make-custom-popup-modal-window-in-vanilla-javascript/#create-a-button-that-opens-pop-up-modal-window)
- [Create Pop Up Modal Overlay](https://softauthor.com/make-custom-popup-modal-window-in-vanilla-javascript/#create%20pop%20up%20modal%20overlay)
- [Center Pop Up Modal Window To The Modal Overlay](https://softauthor.com/make-custom-popup-modal-window-in-vanilla-javascript/#center-pop-up-modal-window-to-the-modal-overlay)
- [Open Up Pop Up Modal Window On Button Click](https://softauthor.com/make-custom-popup-modal-window-in-vanilla-javascript/#open%20up%20pop%20up%20modal%20window%20on%20button%20click)
- [Close/Hide Pop Up Modal Window On Button Click](https://softauthor.com/make-custom-popup-modal-window-in-vanilla-javascript/#close-hide-pop-up-modal-window-on-button-click)
- [Hide Pop Up Modal Window When Modal Overlay Is Clicked](https://softauthor.com/make-custom-popup-modal-window-in-vanilla-javascript/#hide-pop-up-modal-window-when-modal-overlay-is-clicked)

###Create A Button That Opens Pop Up Modal Window

Declare a **button** HTML element with an id **open-modal**.

```HTML
<button id="open-modal">Open Modal Window</button>
```

The goal is when a user presses this **button**, the **pop-up modal window** will **open**.

Style the **button** using [CSS Flexbox](https://softauthor.com/css-flexbox-responsive-multi-column-layout/) and [centre it on the screen](https://softauthor.com/css-how-to-center-a-div-horizontally-vertically/).

```CSS
* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    padding: 10px;
    font-size: 1.1em;
    background: #32bacf;
    color: white;
    border: none;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

button:hover {
    background: rgba(0, 0, 0, 0.7);
}
```

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Custom-Pop-up-Modal-JavaScript-Open-Modal-Button-1-1-1024x621.png)

###Create Pop-Up Modal Overlay

Normally, **pop-up modal windows** have **overlays** with a transparent darker background that covers entire browser screen.

Define a **div** with an id **model-overlay** which will cover the entire screen.

```HTML
<div id="modal-overlay">
<div>
```

Then, [make it to full screen using height:100vh CSS property](https://softauthor.com/css-make-a-div-height-full-screen/).

Bring it in front of the button by using **position:absolute** with a transparent background colour.

```CSS
#modal-overlay {
    width: 100%;
    height: 100vh;
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
}
```

>I just added the border to see the boundaries of the modal-overlay element.

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Custom-Pop-up-Modal-JavaScript-Create-Overlay-2-1024x616.png)

###Center Pop-Up Modal Window To The Modal Overlay

Create a **div** with an id **modal** inside the **modal-overlay** element, which will be an actually **pop-up** **modal window** that user interacts with.

```HTML
<div id="modal-overlay">
  <div id="modal">
  </div>
<div>
```

Add CSS style to make it visible on the screen.

Adding **width:100%** and **max-width:650px** will make sure the **width of the pop-up modal window** won’t exceed when the browser width is more than **650px**.

If the **browser width** is less than **650px**, the pop-up modal window will **stretch the width to fill the screen** which is normally for mobile viewports.

```CSS
#modal-overlay #modal {
    max-width: 650px;
    width: 100%;
    background: white;
    height: 400px;
}
```

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Custom-Pop-up-Modal-JavaScript-Show-Modal-3-1024x626.png)

[Centre the pop-up modal window to the screen using Flexbox](https://softauthor.com/css-how-to-center-a-div-horizontally-vertically/).

To do that, just add the three lines of **Flexbox** code to the **modal-overlay** which are:

- display:flex → Convert an HTML element to Flexbox
- align-items:center → centre the pop-up modal window vertically to the viewport
- justify-content:center → centre the pop-up modal window horizontally to the viewport

```CSS
#modal-overlay {
   ...
  
   display: flex;
   align-items: center;
   justify-content: center;
}
```

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Custom-Pop-up-Modal-JavaScript-Centre-Popup-Modal-3-1024x619.png)

###Open Up Pop-Up Modal Window On Button Click

Now we have the **basic pop-up modal window** designed using **CSS**.

Make it **visible** when a user presses the open modal **button**.

To do that,

First, hide the **modal overlay** by default by changing its **display** property from **flex** to **none**.

```CSS
#modal-overlay {
   ...
  
   display: none; // Changed from flex to none
   align-items: center;
   justify-content: center;
}
```

Create a **DOM reference** to the **open-modal button** as well as the **modal-overlay** elements.

```JavaScript
const openModalButton = document.getElementById("open-modal");
const modalWindowOverlay = document.getElementById("modal-overlay");
```

Attach a click event to the **openModalButton** with the callback arrow function **showModalWindow**.

```JavaScript
const showModalWindow = () => {
    modalWindowOverlay.style.display = 'flex';
}

openModalButton.addEventListener("click", showModalWindow);
```

Set the **display** property of the **modalWindowOverlay** to **flex** inside **showModalWindow()** function which will open up the modal window.

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Custom-Pop-up-Modal-Window-JavaScript-Open-Modal-Window-4.gif)

As you can see, there is **no way** we can **close/hide the pop-up modal window** after its became visible on the screen.

Let’s fix it!

###Close/Hide Pop-Up Modal Window On Button Click

Typically, there will be a **close** **button** on the **top** or **bottom** right side of the **pop-up modal window**.

Let’s add a **close button** on the **bottom left** side of the **modal window**.

Define **header**, **content** and **footer** HTML elements inside the **pop-up modal window**.

```JavaScript
<div id="modal">

    <div class="modal-header">
        <h2>Modal Pop Up Window</h2>
    </div>

    <div class="modal-content">
        <p>Modal Content</p>
    </div>
    
    <div class="modal-footer">
        <button id="close-modal">Close</button>
        <button>Save</button>
    </div>

</div>
```

Generally, you’ll have **two buttons** on the **footer** of the **pop-up modal window**, which may be **save** and **close**.

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Custom-Pop-up-Modal-Window-JavaScript-Add-HTML-Elements-To-The-Modal-Window-5-1024x562.png)

Let’s **push the buttons** to the **bottom** using **Flexbox**.

**Turn** the **display** property of the **pop-up modal window** to **flex** and set the **flex direction** to **column**.

Set **margin-top** to **auto** to the **.modal-footer** element which **pushes** the **buttons** to the **bottom**.

```CSS
#modal-overlay #modal {
    max-width: 650px;
    width: 100%;
    background: white;
    height: 400px;

    display: flex;
    flex-direction: column;
    padding:10px;
}

#modal-overlay #modal .modal-footer {
    margin-top: auto;
}

```

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Custom-Pop-up-Modal-Window-JavaScript-Move-Modal-Window-Footer-Buttons-To-The-Bottom-6-1024x561.png)

Let’s **hide** the **pop-up modal window** when the user presses the **close button**.

Define **a DOM reference** of the **close button**.

**Attach a click event** to the **close button** with the call back function **hideModalWindow**.

Declare **hideModalWindow** function and set the **display** property of **modalWindowOverlay** to **none** inside it.

```JavaScript
const closeModalButton = document.getElementById("close-modal");

const hideModalWindow = () => {
    modalWindowOverlay.style.display = 'none';
}

closeModalButton.addEventListener("click", hideModalWindow);
```

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Custom-Pop-up-Modal-Window-JavaScript-Open-Close-Modal-Window-on-Button-Click-6.gif)

###Hide Pop-Up Modal Window When Modal Overlay Is Clicked

In addition to the close button, you often see the **pop-up modal window** will be closed or hidden when the user clicks away from it.

To do that, we need to **identify** if a user clicks the **actual pop-up modal window** and **its content inside** or the **modal overlay** that covers the entire screen.

To check that,

**Attach a click event** to the **#modal-overlay** with a callback function **hideModalWindowOnBlur**.

```JavaScript
modalWindowOverlay.addEventListener("click", hideModalWindowOnBlur)
```

Using **e.target** and **e.currentTarget** properties of an event object we can **identify** where a user **clicks** when the pop-up modal window is visible on the screen.

**e.target** will capture a clicked HTML element which can be either the **parent** or **child** elements.

The **parent** element will be referred to an element that has a click event attached to.

In this case, the **#modal-overlay**.

The **child** elements will be referred to all the **HTML elements** right inside the **parent** element.

On the other hand, **e.currentTarget** will only get the parent element regardless of where user clicks either **parent** or **child** elements.

In this case the **#modal-overlay**.

This way we can **determine** whether a user clicks the **#modal-overlay** or the actual **pop-up modal window**.

If a user **presses** the modal overlay, hide/close it by checking if e.target value is equal to e.currentTarget.

```JavaScript
const hideModalWindowOnBlur = (e) => {

    if(e.target === e.currentTarget) {
        hideModalWindow();
    }
}

```

![alt text](https://softauthor.com/wp-content/uploads/2022/07/Custom-Pop-up-Modal-Window-JavaScript-Hide-Modal-Overlay-On-Blur-7.gif)

If you’ve any questions or suggestions about this article, feel free to reach out to me by commenting below and I’ll read and reply to each and every one of them.

I’m looking forward to hearing from you.

Happy coding…