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

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

Mary-Kate OlsenOriginal: 2024-10-19 16:00:31947Durchsuche

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>

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>

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>

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!

JavaScript jquery bootstrap html for using Event this

Stellungnahme：

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

Vorheriger Artikel：Wie starte ich ein Bootstrap-Modal automatisch beim Laden der Seite?Nächster Artikel：Wie starte ich ein Bootstrap-Modal automatisch beim Laden der Seite?

In Verbindung stehende Artikel

Mehr sehen