Comment lancer automatiquement un modal Bootstrap lors du chargement de la page ?

Comment lancer automatiquement un modal Bootstrap lors du chargement de la page

Bootstrap offre des fenêtres modales polyvalentes pour améliorer les interactions des utilisateurs. En tant que débutant en JavaScript, vous pouvez rencontrer des difficultés pour activer les modaux lors du chargement de la page. Examinons une approche pratique pour répondre à ce besoin.

Selon la documentation Bootstrap, les modaux peuvent être invoqués via JavaScript en utilisant la syntaxe '$('#myModal').modal(options)'. Cependant, la documentation ne détaille pas explicitement comment activer le modal lors du chargement de la page.

Pour résoudre ce problème, intégrez le modal dans un événement de chargement jQuery placé dans la section d'en-tête du document. Cela garantit que le modal apparaît dès que le chargement de la page est terminé. Voici un exemple :

JS

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

HTML

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

Avec cette configuration, le modal sera automatiquement apparaissent au chargement de la page. De plus, vous pouvez toujours invoquer le modal via un élément déclencheur (par exemple, un lien) :

<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>

En résumé, l'intégration du modal dans un événement de chargement jQuery fournit un moyen simple d'afficher les modaux immédiatement au chargement de la page. , même pour les débutants en JavaScript.

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!