js Modal Dialog Box Usage Detailed Explanation

2021-07-21 07:14:23
OfStack

Modal box (Modal Dialogue Box) can also be called modal dialog box, or dialog box. When a modal box is opened, the user can interact with the dialog box, and click the close button to close the modal box!

Function realization:

1. There is a button on the page to open the modal box, which is hidden by default;

2. The user clicks the button to open the mode box; The user can close the modal box by clicking Close in the modal box or clicking elsewhere on the page

Click elsewhere on the page to close the modal box and use the window. onclick event

Bind the close button to the click event, the button is clicked, and the mode box Modal adds the style display: none;;

Bind the click event to the button button. When the button is clicked, add the style display: block to the modal box Modal;

Get the button button, the Close button, and the modal box Modal on the page first

Code implementation:


<html> 
<head> 
  <style> 
    /*  Pop-up window  (background) */ 
    .modal { 
      display: none; /*  Default hide  */ 
      position: fixed; 
      z-index: 1; 
      padding-top: 100px; 
      left: 0; 
      top: 0; 
      width: 100%; 
      height: 100%; 
      overflow: auto; 
      background-color: rgb(0,0,0); 
      background-color: rgba(0,0,0,0.4); 
    } 
 
    /*  Pop-up contents  */ 
    .modal-content { 
      position: relative; 
      background-color: #fefefe; 
      margin: auto; 
      padding: 0; 
      border: 1px solid #888; 
      width: 35%; 
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
      -webkit-animation-name: animatetop; 
      -webkit-animation-duration: 0.4s; 
      animation-name: animatetop; 
      animation-duration: 0.4s 
    } 
 
    /*  Add Animation  */ 
    @-webkit-keyframes animatetop { 
      from {top:-300px; opacity:0} 
      to {top:0; opacity:1} 
    } 
 
    @keyframes animatetop { 
      from {top:-300px; opacity:0} 
      to {top:0; opacity:1} 
    } 
 
    /*  Close button  */ 
    .close { 
      color: white; 
      float: right; 
      font-size: 28px; 
      font-weight: bold; 
    } 
 
    .close:hover, 
    .close:focus { 
      color: #000; 
      text-decoration: none; 
      cursor: pointer; 
    } 
 
    .modal-header { 
      padding: 2px 16px; 
      background-color: #5587A2; 
      color: white; 
    } 
 
    .modal-body {padding: 2px 16px;} 
 
    .modal-footer { 
      padding: 2px 16px; 
      background-color: #5587A2; 
      text-align: right; 
      color: white; 
    } 
  </style> 
</head> 
<body> 
  <!--  Open pop-up button  --> 
  <button id="myBtn"> Open the pop-up window </button> 
 
  <!--  Pop-up window  --> 
  <div id="myModal" class="modal"> 
 
    <!--  Pop-up contents  --> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <span class="close"> × </span> 
        <h2> Pop-up window head </h2> 
      </div> 
      <div class="modal-body"> 
        <p> Pop-up contents ...</p> 
        <p> Pop-up contents ...</p> 
      </div> 
      <div class="modal-footer"> 
        <h3> Bottom of pop-up window </h3> 
      </div> 
    </div> 
 
  </div> 
  <script> 
    //  Get pop-up window  
    var modal = document.getElementById('myModal'); 
 
    //  Button object for opening pop-up window  
    var btn = document.getElementById("myBtn"); 
 
    //  Get  <span>  Element to close the pop-up window  that closes the modal 
    var span = document.getElementsByClassName("close")[0]; 
 
    //  Click the button to open the pop-up window  
    btn.onclick = function() { 
      modal.style.display = "block"; 
    } 
 
    //  Click  <span> (x),  Close the pop-up window  
    span.onclick = function() { 
      modal.style.display = "none"; 
    } 
 
    //  Close the pop-up window when the user clicks elsewhere  
    window.onclick = function(event) { 
      if (event.target == modal) { 
        modal.style.display = "none"; 
      } 
    } 
  </script> 
</body> 
</html>