Heim > Web-Frontend > js-Tutorial > Wie starte ich Bootstrap-Modals beim Laden der Seite automatisch?

Wie starte ich Bootstrap-Modals beim Laden der Seite automatisch?

Mary-Kate Olsen
Freigeben: 2024-10-19 16:00:31
Original
1082 Leute haben es durchsucht

How to Automatically Launch Bootstrap Modals upon Page Load?

Bootstrap Modal beim Laden der Seite automatisch starten

Die Bootstrap-Dokumentation bietet eine Lösung zum Starten von Modalen beim Laden der Seite mithilfe von JavaScript. Für diejenigen, die mit der Sprache nicht vertraut sind, kann die Implementierung jedoch eine Herausforderung sein.

Eine einfache Methode besteht darin, das jQuery-Ladeereignis im Dokumentkopfabschnitt zu verwenden. Indem Sie das gewünschte Modal in dieses Ereignis einschließen, wird es beim Laden der Seite automatisch angezeigt:

<code class="javascript">$(window).on('load', function() {
    $('#myModal').modal('show');
});</code>
Nach dem Login kopieren

Hier ist ein Beispiel für die Verwendung dieses Codes:

<code class="html"><head>
    <script>
        $(window).on('load', function() {
            $('#myModal').modal('show');
        });
    </script>
</head>
<body>
    <div class="modal" id="myModal">...</div>
</body></code>
Nach dem Login kopieren

Trotz Verwendung des Ladeereignisses , können Sie das Modal weiterhin innerhalb der Seite mit dem folgenden HTML starten:

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

Durch Befolgen dieser Anweisungen können Benutzer ganz einfach Bootstrap-Modals starten, entweder automatisch beim Laden der Seite oder über einen bestimmten Link innerhalb der Seite.

Das obige ist der detaillierte Inhalt vonWie starte ich Bootstrap-Modals beim Laden der Seite automatisch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage