Step-by-Step Guide to Building a JavaScript Modal Pop-up

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.

I will be using a user Dashboard and a form website to explain how modal works.

To create a modal, I will be using HTML, CSS, and JavaScript. 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

creating the HTML 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. I also included a button a second button with the class <button class="close-btn">Close Modal</button> which closes the content when clicked on.

Step 2 - The CSS Styling

Styling the webpage

/* 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;.

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.

.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.

Step 3 - JavaScript

JavaScript functionality is essential so when the button is clicked, It will display the modal box.

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 container 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.

The result

https://codepen.io/Tracy4work/pen/bGmvLqO?editors=0110

Do Check it out, try it and let me know your thoughts. Also like and follow for more helpful articles on web development.

When you click on the home button and the about link, You will notice they are different contents but on the same webpage. This is one of the uses of Modal.

https://codepen.io/Tracy4work/pen/LYgddyg?editors=1010

Tracy

Tracy

How to create a pop-up: JavaScript Modal