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

De nos jours, l’un des aspects les plus intéressants du monde de la programmation est le dialogue modal. Une boîte de dialogue est utilisée pour afficher la dernière page Web mise à jour. Il attire l’attention de l’utilisateur sur un élément spécifique.

Le plus grand avantage de la boîte de dialogue modale est qu’elle affiche des informations supplémentaires qui ne permettent pas de recharger la page. Il fournit aux utilisateurs les informations pertinentes dans la boîte de dialogue d'une page Web similaire.

Un autre avantage qui suggère un dialogue modal est qu’il réduit le temps de chargement et attirent les utilisateurs.

Maintenant que nous avons appris ce qu'est le dialogue modal, voyons comment nous pouvons le créer.

Il existe différentes façons de créer un dialogue modal à l'aide de HTML, CSS et JavaScript.

Commençons par créer notre code étape par étape!

1. Créez HTML.

Créez un <div> avec id=“example”. Tout contenu à l'intérieur de cette zone sera masqué par le navigateur, puis affiché lorsqu'il sera activé. Tout contenu situé en dessous sera «non cliquable» par l'utilisateur.

À l'intérieur de #example placez un autre <div> pour créer l'apparence de la boîte de dialogue. Il contient le contenu que nous voulons montrer à l'utilisateur.

<div id="exemple">
  <div>
    <p>Tout contenu que vous voulez montrer aux utilisateurs.</p>
  </div>
</div>

2. Ajoutez CSS.

Le deuxième étape est styler notre id avec les propriétés CSS.

#example {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 1000;
}

Puis placez un style dans le div interne et rendez-le horizontal pour un effet de boîte de dialogue.

#example div {
  width: 350px;
  height: 80px;
  margin: 100px auto;
  background-color: #f2f2f2;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  padding: 15px;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  border: 3px solid #cccccc;
  position: absolute;
  left: 50%;
  top: 100px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

Pour une compatibilité maximale du navigateur, des extensions telles que -Webkit- pour Safari, Google Chrome et Opera (versions plus récentes), -ms- pour Internet Explorer et -Moz- pour Firefox sont utilisées avec les propriétés border-radius et transform.

De plus, définissez height, margin, padding, et font-family à notre corps.

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #666666;
}

3. Ajoutez JavaScript.

La dernière étape consiste à ajouter du JavaScript dans notre code.

Nous pouvons ajouter la fonction dans les balises <head> de notre document ou dans un fichier .js externe.

function exemple() {
el = document.getElementById("example");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

Nous utilisons une méthode de basculement automatique pour la rendre visible si elle est masquée.

Nous devrions ajouter ce qui suit sur notre page pour que notre boîte de dialogue s’affiche lorsque l’utilisateur clique sur le lien.

<a href='#' onclick=example()'>open</a>

En HTML, nous devrions ajouter un lien pour le cacher:

<a href='#' onclick=example()'>Cliquez ici pour fermer la boîte</a>

Voici le résultat de notre code:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
      }
      h2 {
        font-size: 20px;
        color: #000000;
      }
      #example {
        visibility: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        z-index: 1000;
      }
      #example div {
        width: 350px;
        height: 80px;
        margin: 100px auto;
        background-color: #f2f2f2;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        padding: 15px;
        text-align: center;
        font-weight: bold;
        font-size: 15px;
        border: 3px solid #cccccc;
        position: absolute;
        left: 50%;
        top: 100px;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <h2>Créer Boîte Modale</h2>
    <a href="#" onclick="example()">ouvrir</a>
    <div id="example">
      <div>
        <p>Le contenu que vous souhaitez voir voir va ici.</p>
        <a href="#" onclick="example()">Cliquez ici pour fermer la boîte</a>
      </div>
      <script>
        function example() {
          el = document.getElementById("example");
          el.style.visibility = el.style.visibility == "visible" ? "hidden" : "visible";
        }
      </script>
    </div>
  </body>
</html>

Essayez-vous-même!

Voyons un autre exemple d'une boîte de dialogue modale:

Exemple

<!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>

Essayez-vous-même!

Nous pouvons également créer un popup modal qui peut être créé en utilisant les pouvoirs de CSS3:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.1);
        z-index: 99999;
        opacity: 0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
      }
      .modalDialog:target {
        opacity: 1;
        pointer-events: auto;
      }
      .modalDialog > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: -moz-linear-gradient(#2edbe8, #01a6b2);
        background: -webkit-linear-gradient(#2edbe8, #01a6b2);
        background: -o-linear-gradient(#2edbe8, #01a6b2);
      }
      .close {
        background: #606061;
        color: #ffffff;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
      }
      .close:hover {
        background: #6ed1d8;
      }
    </style>
  </head>
  <body>
    <h2>Créer Boîte Modale</h2>
    <a href="#openModal">Boîte</a>
    <div id="openModal" class="modalDialog">
      <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2>Boîte modale</h2>
        <p>Cette boîte modale est créée en utilisant les pouvoirs de CSS3.</p>
      </div>
      <a href="#close" title="Close" class="close">x</a>
    </div>
  </body>
</html>

Essayez-vous-même!