Wie kann man eine modale Dialogbox mit CSS und JavaScript erstellen

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <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">Klicken Sie hier, um modal zu sehen!</button>
    <div class="modal">
      <div class="modal-content">
        <span class="close-button">&times;</span>
        <h2>Das ist ein Modal</h2>
      </div>
    </div>
    <script>
      var modal = document.querySelector(".modal");
          var trigger = document.querySelector(".example");
          var 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>