Detailed Explanation of js Modal Dialog Box Usage

The modal box (Modal Dialogue Box) can also be called a modal dialog or dialog. When a modal box is opened, users can interact with the dialog. Clicking the close button can close the modal box!

Function Implementation:

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

2. Users can open the modal box by clicking the button; users can close the modal box by clicking the close button within the modal or clicking anywhere else on the page

✦　 Clicking anywhere else on the page will close the modal box, using the window.onclick event

✦　 Bind a click event to the close button, and when the button is clicked, add the style display:none to the modal box Modal

✦　 Bind a click event to the button, and when the button is clicked, add the style display:block to the modal box Modal

✦　 First, get the button, close button, and modal box Modal on the page

Implementation Code:

<html> 
<head> 
  <style> 
    /* Pop-up (background) */ 
    .modal {}} 
      display: none; /* Default hidden */ 
      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); 
    } 
    /* Popup content */ 
    .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 popup button --> 
  <button id="myBtn">Open popup</button> 
  <!-- Popup --> 
  <div id="myModal" class="modal"> 
    <!-- Popup content --> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <span class="close">×</span> 
        <h2>Popup header</h2> 
      </div> 
      <div class="modal-body"> 
        <p>Popup content.../p> 
        <p>Popup content.../p> 
      </div> 
      <div class="modal-footer"> 
        <h3>Popup Bottom</h3> 
      </div> 
    </div> 
  </div> 
  <script> 
    // Get the popup 
    var modal = document.getElementById('myModal'); 
    // The button object to open the popup 
    var btn = document.getElementById("myBtn"); 
    // Get the <span> element to close the popup that closes the modal 
    var span = document.getElementsByClassName("close")[0]; 
    // Click the button to open the popup 
    btn.onclick = function() { 
      modal.style.display = "block"; 
    } 
    // Click <span> (x), close the popup 
    span.onclick = function() { 
      modal.style.display = "none"; 
    } 
    // Close the popup when the user clicks elsewhere 
    window.onclick = function(event) { 
      if (event.target == modal) { 
        modal.style.display = "none"; 
      } 
    } 
  </script> 
</body> 
</html>

That's all for this article. Hope it helps everyone's learning and also hope everyone will support the Naya Tutorial.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting. Provide relevant evidence, and once verified, this site will immediately delete the infringing content.)

Basic Tutorial