Comment afficher automatiquement un modal Bootstrap lors du chargement de la page sans JavaScript ?

Lancement du modal Bootstrap lors du chargement de la page sans connaissances en JavaScript

La documentation Bootstrap conseille d'utiliser JavaScript pour lancer un modal, mais cela peut être intimidant pour ceux qui ne connaissent pas la langue. Cependant, lancer un modal lors du chargement de la page est possible même sans maîtrise de JavaScript.

Solution :

Pour afficher un modal immédiatement lors du chargement de la page, intégrez-le dans un chargement jQuery événement dans la section d'en-tête du document :

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

Code HTML :

<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 garantit que le modal avec l'ID "myModal" apparaît dès que la page se charge.

Notes supplémentaires :

• Vous pouvez toujours lancer le modal manuellement en ajoutant un lien comme celui-ci :

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

• Cette méthode fonctionne sans aucune dépendance JavaScript et est idéale pour ceux qui préfèrent éviter de coder ou en ont une connaissance limitée.

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!