Make Pop-Up Modal Window In Vanilla JavaScript

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
• Create Pop Up Modal Overlay
• Center Pop Up Modal Window To The Modal Overlay
• Open Up Pop Up Modal Window On Button Click
• Close/Hide Pop Up Modal Window On Button Click
• 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.

<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 and centre it on the screen.

* {
    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);
}

Create Pop-Up Modal Overlay

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

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

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

Then, make it to full screen using height:100vh CSS property.