Comment Créer une Boîte de Dialogue Modale Avec CSS et JavaScript

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);
        transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
      }
    </style>
  </head>
  <body>
    <h2>Créer Boîte Modale</h2>
    <button class="example">Cliquez ici pour voir le modal!</button>
    <div class="modal">
      <div class="modal-content">
        <span class="close-button">&times;</span>
        <h2>Ceci est un 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>