Wie zeige ich ein Bootstrap-Modal automatisch beim Laden der Seite ohne JavaScript an?

Bootstrap-Modal beim Laden der Seite ohne JavaScript-Kenntnisse starten

In der Bootstrap-Dokumentation wird die Verwendung von JavaScript zum Starten eines Modals empfohlen, dies kann jedoch entmutigend sein diejenigen, die mit der Sprache nicht vertraut sind. Das Starten eines Modals beim Laden der Seite ist jedoch auch ohne JavaScript-Kenntnisse möglich.

Lösung:

Um ein Modal sofort beim Laden der Seite anzuzeigen, betten Sie es in einen jQuery-Ladevorgang ein Ereignis im Kopfbereich des Dokuments:

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

HTML-Code:

<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 sorgt dafür, dass das Modal mit der ID „myModal“ sofort erscheint Die Seite wird geladen.

Zusätzliche Hinweise:

• Sie können das Modal weiterhin manuell starten, indem Sie einen Link wie diesen hinzufügen:

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

• Diese Methode funktioniert ohne JavaScript-Abhängigkeiten und ist ideal für diejenigen, die das Codieren lieber vermeiden möchten oder nur begrenzte Kenntnisse darüber haben.

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