How to Create a Modal Dialog Box with CSS and JavaScript

Nowadays one of the exciting things in the programming world is modal dialog. A modal dialog or popup box is used to show the last-updated web page. It attracts the user’s attention to a specific element.

The most significant advantage of the modal dialog is that it shows added information not loading the page again. It provides the users with the relevant information into the dialog box on a similar web page.

Another advantage that suggests modal dialog is that they decrease load times attracting the users.

Now that we learn what is Modal dialog, let’s see how we can create them.

There are various ways to create modal dialog by using HTML, CSS, and JavaScript.

Let’s start creating our code step by step!

1. Create HTML.

Create a <div> with id=“example”. Any content inside this area will be hidden by the browser and then be shown when activated. Any content beneath it will be “unclickable” by the user.

Inside #example place another <div> to create a dialog box appearance. It contains the content we want to show the user.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div id="example">
      <div>
        <p>Any content</p>
      </div>
    </div>
  </body>
</html>

2. Add CSS.

The second step is to style our id with CSS properties.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        visibility: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        z-index: 1000;
      }
    </style>
  </head>
  <body>
    <div id="example">
      <div>
        <p>Any content</p>
      </div>
    </div>
  </body>
</html>

Then put a style to the inner div and make it horizontal for a dialog box effect.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example div {
        width: 350px;
        height: 80px;
        margin: 100px auto;
        background-color: #f2f2f2;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border: 1px solid #666666;
        padding: 15px;
        text-align: center;
        font-weight: bold;
        font-size: 15px;
        border: 3px solid #cccccc;
        position: absolute;
        left: 50%;
        top: 100px;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div id="example">
      <div>
        <p>Any content you want to show the user.</p>
      </div>
    </div>
  </body>
  </html>

For maximum browser compatibility, extensions such as -Webkit- for Safari, Google Chrome, and Opera (newer versions), -Moz- for Firefox is used with the border-radius and the transform properties.

Also, set height, margin, padding, and font-family to our body.

body {
height:100%;
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
}

3. Add JavaScript.

The final step is to add JavaScript in our code.

We can add the function either in the <head> of our document or in an external .js file.

function example() {
el = document.getElementById("example");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

We use an automatic toggle method to make it visible if it is hidden.

We should add the following on our page so when the user clicks on the link our box will be shown.

<a href='#' onclick=example()'>open</a>

Within HTML, we should add a link to hide it:

<a href='#' onclick=example()'>Click here to close the box</a>

Here’s the outcome of our code:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
      }
      h2 {
        font-size: 20px;
        color: #000000;
      }
      #example {
        visibility: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        z-index: 1000;
      }
      #example div {
        width: 350px;
        height: 80px;
        margin: 100px auto;
        background-color: #f2f2f2;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border: 1px solid #666666;
        padding: 15px;
        text-align: center;
        font-weight: bold;
        font-size: 15px;
        border: 3px solid #cccccc;
        position: absolute;
        left: 50%;
        top: 100px;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <h2>Create Modal Box</h2>
    <a href='#' onclick='example()'>open</a>
    <div id="example">
      <div>
        <p>Content you want the user to see goes here.</p>
        <a href='#' onclick='example()'>Click here to close the box</a>
      </div>
      <script>
        function example() {
          el = document.getElementById("example");
          el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
        }
      </script>
    </div>
  </body>
</html>

Let’s see another example of a modal dialog box:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #cccccc;
        opacity: 0;
        visibility: hidden;
        transform: scale(1.1);
        transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
      }
      .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #eeeeee;
        padding: 1rem 1.5rem;
        width: 24rem;
        border-radius: 0.5rem;
      }
      .close-button {
        float: right;
        width: 1rem;
        line-height: 1.5rem;
        text-align: center;
        cursor: pointer;
        border-radius: 30px;
        background-color: #eeeeee;
      }
      .close-button:hover {
        background-color: #adadad;
      }
      .show-modal {
        opacity: 1;
        visibility: visible;
        transform: scale(1.0);
        transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
      }
    </style>
  </head>
  <body>
    <h2>Create Modal Box</h2>
    <button class="example">Click here to see the modal!</button>
    <div class="modal">
      <div class="modal-content">
        <span class="close-button">&times;</span>
        <h2>This is a Modal</h2>
      </div>
    </div>
    <script>
      let modal = document.querySelector(".modal");
      let trigger = document.querySelector(".example");
      let closeButton = document.querySelector(".close-button");
      function toggleModal() {
        modal.classList.toggle("show-modal");
      }
      function windowOnClick(event) {
        if(event.target === modal) {
          toggleModal();
        }
      }
      trigger.addEventListener("click", toggleModal);
      closeButton.addEventListener("click", toggleModal);
      window.addEventListener("click", windowOnClick);
    </script>
  </body>
</html>

We can also create a modal popup that can be created using the powers of CSS3:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.1);
        z-index: 99999;
        opacity: 0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
      }
      .modalDialog:target {
        opacity: 1;
        pointer-events: auto;
      }
      .modalDialog > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: -moz-linear-gradient(#2edbe8, #01a6b2);
        background: -webkit-linear-gradient(#2edbe8, #01a6b2);
        background: -o-linear-gradient(#2edbe8, #01a6b2);
      }
      .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
      }
      .close:hover {
        background: #6ed1d8;
      }
    </style>
  </head>
  <body>
    <h2>Create Modal Box</h2>
    <a href="#openModal">Box</a>
    <div id="openModal" class="modalDialog">
      <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2>Modal Box </h2>
        <p>This modal box is created using the powers of CSS3.</p>
      </div>
      <a href="#close" title="Close" class="close">x</a>
    </div>
  </body>
</html>