A **modal** is a me​ssage box that is displayed on top of your screen.

​To create a modal in CSS:

* *HTML* is required to create the container.
* *JavaScript* is used to add event listeners to make the modal functional.
* *CSS* is used to style the modal

# Implementation

HTML:
1. A `button` is created. Clicking on it will open the modal.
2. A `div` is created. This will be a container for the modal.
3. Another `div` is created. This will encapsulate all the contents of the modal.
4. All the elements to be displayed on the modal are created. In the example below, the modal contains some text and a *close* button. Note that the header and footer for the modal can also be created here.

JavaScript:
5. Get the `button` created in HTML, and set the display property of the modal contents to `block`, in the `onclick()` method, so that the modal contents are visible after the button is clicked.
6. Get the close button, and set the display property of the modal to `none`, in the `onclick()` method, so that the modal contents are invisible after the button is clicked.

CSS:
7. The styles for some HTML elements are specified.

/* Styling the open modal button */
.modalbtn {
 background-color: #B1A9D4;
 border-radius: 5px;
 padding: 15px 30px;
 text-align: center;
 font-size: 15px;
 font-weight: bold;
}
/* Styling the close modal button */
.closebtn {
 float: right;
 font-size: 15px;
 font-weight: bold;
}
.closebtn:hover {
 cursor: pointer;
}
/* Styling the modal container */
.modal {
 display: none;
}
/* Styling the text inside the modal */
.modalcontent {
 position: relative;
 font-size: 15px;
 padding: 15px;
 background-color: #DEDAF7;
 width: 40%;
 text-align: center;
 margin: 2%;
}

<html>
   <head>
   </head>
 <body>
     
   <button id="modal_btn" class="modalbtn">Click here to open a modal</button>
   
   <div id="modal" class = "modal">
       <div class="modalcontent">
    
           <span id="close_btn" class="closebtn">x</span>
           <p>This is a modal!</p>
       </div>
   </div>
   
   <script>
    //If the button to open the modal is clicked, then
    //it should open the modal. ids are used to refer to the HTML elements
       document.getElementById("modal_btn").onclick = function(){
           document.getElementById("modal").style.display = 'block';
       }
    // If the close button on the modal is clicked, then
    // the modal should close. ids are used to refer to the HTML elements
        document.getElementById("close_btn").onclick = function(){
           document.getElementById("modal").style.display = 'none';
       }

   </script>
</body>
</html>


// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

How to make a modal using CSS, HTML, and JavaScript

Implementation