CSS - Modal

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>