How to create a pop-up: JavaScript Modal
Tags: webdev, javascript, programming, tutorial
Published: 2023-05-09 23:38:47

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

## 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 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
Codepen Link: https://codepen.io/Tracy4work/pen/bGmvLqO 

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