Comment lancer automatiquement un modal Bootstrap au chargement de la page ?

Lancer Bootstrap Modal lors du chargement de la page

Bootstrap fournit un moyen simple de créer des fenêtres contextuelles modales, mais cela nécessite des connaissances de base en JavaScript. Pour les débutants, cela peut être intimidant, surtout lorsque vous essayez de lancer directement un modal lors du chargement de la page.

Comprendre la documentation

La documentation Bootstrap suggère d'appeler le modal avec $ ("#monModal").modal(options). Cependant, déterminer comment utiliser ce code pour un scénario de chargement de page peut prêter à confusion.

Solution

Pour lancer un modal Bootstrap immédiatement après le chargement de la page, enveloppez-le dans un événement de chargement jQuery dans le fichier section de votre document. Cela déclenchera automatiquement le modal lorsque la page sera chargée.

<code class="html"><script type="text/javascript">
  $(window).on('load', function() {
    $('#myModal').modal('show');
  });
</script></code>

Assurez-vous que votre code HTML inclut le modal avec les classes et la structure nécessaires :

<code class="html"><div class="modal hide fade" id="myModal">
  <!-- Modal Header -->
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Modal title</h4>
  </div>

  <!-- Modal Body -->
  <div class="modal-body">
    ...
  </div>

  <!-- Modal Footer -->
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div></code>

Bien que cette méthode ouvre automatiquement le modal au chargement de la page, vous pouvez toujours déclencher le modal manuellement à l'aide d'un bouton ou d'un lien avec le code suivant :

<code class="html"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch Modal
</button></code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!