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.

How to create <div> element inside another <div>

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

Try it Yourself »

2. Add CSS.

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

How to add styles to <div> element

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

Try it Yourself »

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

How to add styles to <div> element inside another <div>

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

Try it Yourself »

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.

How to add styles using height, margin, padding, font-family properties

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.

How to create function for Modal Dialog Box

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.

How to call function and open Modal Dialog Box )

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

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

Call function and hide Modal Dialog Box

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

Here’s the outcome of our code:

Example

Example of How to Create a Modal Dialog Box with CSS and JavaScript

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

Try it Yourself »

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

Example

How to Create a Modal Dialog Box with JS

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

Try it Yourself »

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

Example

How to Create a Modal Dialog Box with CSS

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

Try it Yourself »