Wie starte ich Bootstrap Modal automatisch beim Laden der Seite für Nicht-JavaScript-Benutzer?

Bootstrap Modal automatisch beim Laden der Seite für Nicht-JavaScript-Benutzer starten

In der Bootstrap-Dokumentation wird die Verwendung von JavaScript zum Starten von Modalen mit der folgenden Syntax vorgeschlagen:

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

Für diejenigen, die mit JavaScript nicht vertraut sind, kann dies eine entmutigende Aufgabe sein. Hier ist eine einsteigerfreundliche Lösung, mit der Sie ohne JavaScript-Kenntnisse sofort beim Laden einer Seite ein Modal starten können:

1. Verbinden Sie das Modal mit einem jQuery-Ladeereignis:

Im Fügen Sie im Abschnitt Ihres HTML-Dokuments den folgenden Code hinzu:

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

2. Fügen Sie den HTML-Code für das Modal ein:

In Ihrem HTML-Dokument Fügen Sie den folgenden Code hinzu, um das Modal zu definieren:

<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>

Dieser Code definiert einen einfachen modalen Dialog mit einer Kopfzeile, einem Textkörper und einer Fußzeile. Sie können den Inhalt nach Ihren Wünschen anpassen.

Nachdem Sie diese Elemente hinzugefügt haben, wird das Modal automatisch angezeigt, wenn die Seite geladen wird.

Hinweis: Sie können das Modal weiterhin manuell starten über einen Link mit der folgenden Syntax:

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

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