CSS - Modal

une classe pour afficher une fenêtre modale

La mise en place nécessite 2 étapes:

  1. un bouton ou un déclencheur pour afficher la fenêtre modale.
    Exemple, le code des boutons ci-dessus (la fonction openModal est décrite en fin d'article'):
    <button onclick="document.getElementById('modal').style.display='block'">Ouvrir la fenêtre modale pour l'éternité</button>
    <button onclick="openModal('modal',2);">Ouvrir la fenêtre modale pour 2 secondes</button>
    
  2. le code pour afficher la fenêtre modale
    <div id="modal" class="up-modal">
      <div class="up-modal-content bloc3 bd-bleuClair">
        <p>Le texte affiché dans la fenêtre modale</p>
        <button onclick="document.getElementById('modal').style.display='none'">
          Fermer
        </button>
      </div>	
    </div>

Exemple de code Javascript

Ouvrir la fenêtre au chargement de la page

<script>
  document.getElementById('modal').style.display='block';
</script>

Ouvrir la fenêtre 4 secondes après le chargement de la page

<script>
  setTimeout("document.getElementById('modal').style.display='block'", 4000);
</script>

Fermer la fenêtre après 10 secondes

Le plus simple est d'utiliser un petit script qui fera l'ouverture et la fermeture

<script>
function openModal(id, delai=0) {
  var e = document.getElementById(id);
  e.style.display='block';
  if (delai>0) {
    setTimeout(function(){e.style.display='none';}, delai*1000);
  }
}
</script>

qui sera appelé dans le code d'un bouton, en passant en paramètre l'ID du bloc fenêtre et si besoin le délai de fermeture en secondes.

<button onclick="openModal('modal',10);">...</button>

Ouverture et fermeture automatique

Encore un script JS pour faire le travail. La fonction openModal prend en paramètres : l'ID de la fenêtre modale, le retard à l'ouverture en secondes et le nombre de secondes durant laquelle la fenêtre reste visible. 0=infini.

<script>
function openModal(id, openDelai=0, closeDelai=0) {
  var e = document.getElementById(id);
  // ouverture
  setTimeout(function(){e.style.display='block';}, openDelai*1000);
  // fermeture
  if (closeDelai>0) {
    setTimeout(function(){e.style.display='none';}, (openDelai+closeDelai)*1000);
  }
}
// lancer l'ouverture/fermeture
openModal('modal',3,2);
</script>