Créer simplement une fenêtre modale avec ouverture automatique sur Bulma framework [CSS + JS]

Chez emandarine, nous avons parfois besoin de rajouter des fenêtres modales dans nos sites web. Le framework que nous utilisons, Bulma, offre une mise en forme déjà prédéfinie pour ce cas de figure, malheureusement il ne fournit pas le moyen de le déclencher. Il existe bien quelques codes javascript en ligne pour réaliser cette action, mais ils sont assez complexes et ne fonctionnent pas toujours correctement. Nous avons décidé de faire moins complexe et plus performant.

Voici donc une méthode simple, rapide et efficace pour déclencher manuellement un modal Bulma en pur CSS par un bouton, ou automatiquement avec du Javascript.

Tout d’abord, voici le markup HTML à insérer dans votre page :

<!-- Bouton d'ouverture -->
<a href="#modalOpen" id="modalContentin" class="button is-primary">Ouvrir</a>

<!-- Conteneur modal -->
<div class="modal" id="modalOpen">
  <div class="modal-background"></div> <!-- Overlay arrière-plan -->
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Titre du modal</p>
      <!-- Bouton de fermeture -->
      <a href="#" id="modalContentout" title="Fermer la fenêtre">
        <i class="fas fa-times btn_close"></i> <!-- Icône font awesome -->
      </a>
    </header>

    <section class="modal-card-body">
      <!-- Insérez ici le contenu de votre modal -->
    </section>

    <footer class="modal-card-foot">
      <a href="" class="button is-primary">En savoir plus</a> <!-- Bouton optionnel -->
    </footer>
  </div>
</div>

Nous allons maintenant déclencher l’ouverture à l’aide de la pseudo-classe :target. Il vous suffit pour cela de rajouter dans votre fichier CSS :

/* Vise l'identifiant "modalOpen" situé sur le conteneur modal */
#modalOpen:target {
   display: flex;
}

Et voilà, votre modal est opérationnel !

Corsons un peu les choses avec un peu de javascript pour que le modal s’active automatiquement quelques secondes après l’ouverture de la page. Ajoutez sous votre html avant la fermeture de la balise du conteneur de modal :

<script>
   setTimeout("CallButton()",2000)
   function CallButton()
   {   document.getElementById("modalContentin").click();   }

   setTimeout("CallButton2()",10000)
   function CallButton2()
   {   document.getElementById("modalContentout").click();   }
</script>

Ce script fait appel aux identifiants modalContentin et modalContentout, il déclenche l’ouverture du modal 2 secondes après le chargement de la page et le ferme 10 secondes plus tard. Vous pouvez ajuster ces valeurs à votre contenance ou supprimez la deuxième fonction si vous préférez fermer la fenêtre manuellement.

Vous pouvez bien sûr adapter ce fonctionnement à d’autres framework CSS ou à votre propre code, assurez vous juste de conserver les identifiants et les balises de lien.