How to create a Modal with JavaScript

Introduction

Modal is a way for a browser to display important information on a website. Some of its used cases are highlighting an important notice to a user, confirming, or providing additional information.

JavaScript modal also known as a pop-up window is a user interface that displays content on top of the current webpage. Modals are used to provide additional information for user input and confirm an action, you can also use it to create a dynamic page or dashboard with a single HTML file.

Project Overview

I will be building a simple project to further explain the importance of a modal. I will use HTML, CSS, and JavaScript to create a modal. HTML and CSS are used to build the modal box while JavaScript handles the behavior of the modal so that when clicked, the pop-up window will be displayed.

Step 1 - The HTML Structure

You will begin with creating the HTML structure for the project using the form tag:

      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <title>Modal Example</title>

      </head>
      <body>
        <h1>Modal Example</h1>

        <!-- Button to open the modal -->
        <button class="btn-open">Open Modal</button>

        <!-- The modal -->
        <div class="modal-background">
          <div class="modal-content">
            <h2>Modal Title</h2>
            <p>Modal message goes here.</p>

            <!--Button to close the modal content-->
            <button class="close-btn">Close Modal</button>
          </div>
        </div>

      </body>
      </html>

The HTML code contains a button <button class="btn-open">Open Modal</button> that would be clicked to view the pop-up and the content, <div class="modal-content"> that would display when the button is clicked.
A second button is included with the class <button class="close-btn">Close Modal</button> which closes the content when clicked on.

Step 2 - The CSS Styling

CSS is necessary to define the box modal and make the project more presentable.

/* Style the modal background */
    .modal-background {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }

    /* Style the modal content */
    .modal-content {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background-color: white;
      border-radius: 5px;
      z-index: 1000;
    }

.modal-background gives the body container a gray background color which is positioned fixed and placed on the top - top: 0;.
.modal-content is the container for the modal content. top: 50%; sets the top edge of the modal to be at 50% of the height of the screen (viewport). This means that the top of the modal will be halfway down the screen, vertically centered.
left: 50%; sets the left edge of the modal to be at 50% of the width of the screen. This means that the left edge of the modal will be halfway across the screen, horizontally centered.
transform: translate(-50%, -50%); moves the modal back up by 50% of its own height (to counteract the top: 50%; setting) and back left by 50% of its own width (to counteract the left: 50%; setting). This centers the modal perfectly both horizontally and vertically.

Note: It is important to note that when styling a modal, it should be positioned to be fixed; The modal content and its background color.

Step 3 - JavaScript

The Javascript code would ensure the modal box is displayed by responding to a click event.

let modalBG = document.querySelector('.modal-background');
let modalContent = document.querySelector('.modal-content');
let closemodal = document.querySelector('.closebtn');
let openmodal = document.querySelector('.openbtn');

function openModal() {
  modalBG.style.display = 'block';
  modalContent.style.display = 'block';
}

function closeModal() {
  modalBG.style.display = 'none';
  modalContent.style.display = 'none';
}

openmodal.onclick = openModal;
closemodal.onclick = closeModal;

The first part created a variable for each of the class containers let modalBG = document.querySelector('.modal-background');.
The second part created a function that would be executed when the button is clicked function openModal() { modalBG.style.display = 'block'; modalContent.style.display = 'block'; }.

Initially, the modal-background is set to a display: none; on the CSS, but I created a function that sets the modal-background display: block; when the button <button class="btn-open">Open Modal</button> is clicked.

Conclusion

A modal works in different ways in providing information to users, so it is necessary to learn how to use it. If you found this article useful, like and follow for more.