Modals


HTML

<!-- Modal 1 -->
<div id="modal1" class="modal">
  <!-- Modal 1 content -->
  <div class="modal-content">
    <span class="close">×</span>
    <p>
      In user interface design for computer
      applications, a modal window is a graphical
      control element subordinate to an
      application's main window. It creates a
      mode that disables the main window but
      keeps it visible, with the modal window
      as a child window in front of it. Users
      must interact with the modal window before
      they can return to the parent application.
      This avoids interrupting the workflow on
      the main window. Modal windows are
      sometimes called heavy windows or
      modal dialogs because they often display
      a dialog box
    </p>
  </div>
</div>

CSS

/* The Modal (background) */
.modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   left: 0; /* position in the top left corner */
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
   background-color: #f9f9f9;
   padding: 20px;
   border: 1px solid #888;
   width: 80%; /* Could be more or less, depending on screen size */

   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

/* The Close Button */
.close {
   color: #aaa;
   float: right;
   font-size: 28px;
   font-weight: bold;
}

.close:hover, .close:focus {
   color: black;
   text-decoration: none;
   cursor: pointer;
}

JavaScript

<script>
// Get the modal
var modal1 = document.getElementById("modal1");

// Get the button that opens the modal
var btn1 = document.getElementById("btn1");

// When the user clicks on the button, open the modal
btn1.onclick = function() {
   modal1.style.display = "block";
}

// Get the <span>s element that close the modal
// This returns as an array, one for each modal
var span = document.getElementsByClassName("close");

// When the user clicks on <span> (x), close the modal
span[0].onclick = function() {
   modal1.style.display = "none"
}

// When the user clicks anywhere outside of the modal, close it
modal1.onclick = function(event) {
   modal1.style.display = "none";
}
</script>

Note: This code works for the first button on this example. The script would have to be modified to handle the other three buttons, which is easy enough. Just copy/paste each element and add IDs for each