Comment lancer automatiquement Bootstrap Modal lors du chargement de la page pour les utilisateurs non JavaScript ?

Lancer automatiquement le modal Bootstrap lors du chargement de la page pour les utilisateurs non-JavaScript

La documentation Bootstrap suggère d'utiliser JavaScript pour lancer des modaux en utilisant la syntaxe suivante :

<code class="javascript">$('#myModal').modal(options)</code>

Pour ceux qui ne sont pas familiers avec JavaScript, cela peut être une tâche ardue. Voici une solution conviviale pour les débutants qui vous permet de lancer un modal immédiatement lors du chargement de la page sans aucune connaissance de JavaScript :

1. Enveloppez le modal dans un événement de chargement jQuery :

Dans la zone section de votre document HTML, ajoutez le code suivant :

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

2. Incluez le HTML pour le modal :

Dans votre document HTML, ajoutez le code suivant pour définir le modal :

<code class="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></code>

Ce code définit une boîte de dialogue modale simple avec un en-tête, un corps et un pied de page. Vous pouvez personnaliser le contenu comme vous le souhaitez.

Après avoir ajouté ces éléments, le modal apparaîtra automatiquement lors du chargement de la page.

Remarque : Vous pouvez toujours lancer le modal manuellement en utilisant un lien avec la syntaxe suivante :

<code class="html"><a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a></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!