Wie starte ich ein Bootstrap-Modal automatisch beim Laden der Seite?

Bootstrap Modal beim Laden der Seite starten

Bootstrap bietet eine einfache Möglichkeit, modale Popups zu erstellen, erfordert jedoch einige grundlegende JavaScript-Kenntnisse. Für Anfänger kann dies entmutigend sein, insbesondere wenn sie versuchen, ein Modal beim Laden der Seite direkt zu starten.

Verstehen der Dokumentation

In der Bootstrap-Dokumentation wird empfohlen, das Modal mit $ aufzurufen ('#myModal').modal(optionen). Es kann jedoch verwirrend sein, herauszufinden, wie dieser Code für ein Seitenladeszenario verwendet wird.

Lösung

Um ein Bootstrap-Modal sofort beim Laden der Seite zu starten, packen Sie es in ein jQuery-Ladeereignis im Abschnitt Ihres Dokuments. Dadurch wird das Modal automatisch ausgelöst, wenn die Seite geladen wird.

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

Stellen Sie sicher, dass Ihr HTML das Modal mit den erforderlichen Klassen und der erforderlichen Struktur enthält:

<code class="html"><div class="modal hide fade" id="myModal">
  <!-- Modal Header -->
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Modal title</h4>
  </div>

  <!-- Modal Body -->
  <div class="modal-body">
    ...
  </div>

  <!-- Modal Footer -->
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div></code>

Während diese Methode automatisch öffnet Modal beim Laden der Seite, Sie können das Modal weiterhin manuell über eine Schaltfläche oder einen Link mit dem folgenden Code auslösen:

<code class="html"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch Modal
</button></code>

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