Bootstrap -Modale verstehen

Bootstrap-Modal Box: Leichtes, anpassbares Popup-Fenster

Bootstrap-Modal Box ist ein leichtes, anpassbares und reaktionsschnelles JQuery-Bootstrap-Plug-In zum Anzeigen von Alarmpopups, Videos, Bildern und vielem mehr. Es ist in drei Teile unterteilt: den Titel, den Körper und die Fußzeile, jeweils seine einzigartige Funktion. Es ist nicht erforderlich, JavaScript -Code zu schreiben, da alle Code und Stile durch Bootstrap vordefiniert werden.

Schlüsselmerkmale:

• Leicht und reaktionsschnell: Das Modal Box wurde mit einem einfachen und gut angezeigten auf allen Geräten ausgelegt.
• hochpassbar: Sie können leicht die Größe ändern, dynamische Inhalte hinzufügen und sogar scrollbar machen.
• Kein JavaScript -Code erforderlich: Bootstrap alle erforderlichen Code und Stile.
• Reiche Ereignisunterstützung: Sie können die .on() -Methode von JQuery verwenden, um verschiedene Ereignisse wie show.bs.modal, shown.bs.modal, hide.bs.modal und hidden.bs.modal zu binden, um eine mehr Granularität zu erreichen Kontrolle.
• kann verhindern, dass externe Klicks schließen: Durch Einstellen der Option backdrop in 'static' können Sie verhindern, dass Benutzer auf dem Modal -Box klicken, um sie zu schließen.

Modale Boxstruktur:

Das Standardbox des standardmäßigen Bootstrap -Modals lautet wie folgt:

modales Triggerbox:

Sie können einen Link oder eine Schaltfläche verwenden, um ein modales Feld auszulösen. Der Marker für das Triggerelement kann so aussehen:

<code class="language-html"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">点击打开模态框</a></code>

Beachten Sie, dass das Link -Element zwei benutzerdefinierte Dateneigenschaften enthält: data-toggle und data-target. data-toggle Sagen Sie Bootstrap, was zu tun ist, data-target Sagen Sie Bootstrap, welches Element zu öffnen ist. Wenn ein solcher Link geklickt wird, wird daher ein modales Feld mit ID "BasicModal" angezeigt.

modaler Boxcode:

Folgendes sind die Markierungen, die erforderlich sind, um das Modal -Box selbst zu definieren:

<code class="language-html"><div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">基本模态框</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>模态框主体</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div></code>

Die übergeordnete Div der Modal -Box sollte die gleiche wie die im obigen Triggerelement verwendete ID entsprechen. In diesem Fall ist es https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal. Die Eigenschaften aria-labelledby und aria-hidden werden für die Zugänglichkeit verwendet und werden empfohlen, beibehalten zu werden.

Passen Sie die modale Boxgröße an:

Sie können die Größe des modalen Feldes ändern, indem Sie dem .modal-dialog div: modal-lg (großer Modalbox) oder modal-sm (kleiner Modalbox) eine Modifikatorklasse hinzufügen.

Verwenden Sie JQuery, um das Modal -Box zu aktivieren:

Sie können die .modal() -Funktion von JQuery verwenden, um das Modal -Box zu steuern:

<code class="language-html"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">点击打开模态框</a></code>

options ist ein JavaScript -Objekt, das zum Anpassen von Verhalten verwendet wird, wie z. B.

<code class="language-html"><div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">基本模态框</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>模态框主体</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div></code>

Andere verfügbare Optionen sind: keyboard, show und focus.

Bootstrap -Modal -Box -Ereignis:

Sie können die .on() -Methode von JQuery verwenden, um verschiedene Ereignisse zu binden, um das Verhalten des Bootstrap -Modalbox weiter anzupassen.

Zusammenfassung:

Bootstrap Modal Box ist eine der besten Plugins, die von Bootstrap bereitgestellt werden. Für Anfängerdesigner ist dies eine der besten Möglichkeiten, Inhalte in einem Popup zu laden, ohne JavaScript -Code zu schreiben.

(Folgendes ist der FAQ

FAQ:

• Was ist der Zweck von Bootstrap -Modalbox?

  wird verwendet, um Popup-Anzeigeinformationen zu erstellen, ohne dass der Benutzer die aktuelle Seite verlässt.

• Wie verwendet ich JavaScript, um Bootstrap -Modalboxen auszulösen?

  Verwenden Sie die Methode wie . .modal('show') $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyModal').modal('show');

• Wie schließe ich das Bootstrap -Modalbox mit JavaScript?

  Verwenden Sie die Methode wie . .modal('hide') $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyModal').modal('hide');

• Wie kann das Erscheinungsbild des Bootstrap -Modalbox angepasst werden?

  Sie können Klassennamen (z. B. , , Bootstrap -Farbklassen) verwenden, um anzupassen. .modal-lg .modal-sm

• Können auf derselben Seite mehrere modale Felder verwendet werden?

  Ja, aber nur einer kann gleichzeitig angezeigt werden.

• Wie füge ich dem Bootstrap -Modal Box Animation hinzu?

  Sie können CSS- oder JavaScript -Bibliotheken (wie Animate.css) verwenden.

• Wie lädt ich dynamischen Inhalt in das Bootstrap -Modalbox?

  ajax ist verfügbar.

• Wie kann man den Bootstrap -Modal -Box scrollbar machen?

  Verwenden Sie die Klasse . .modal-dialog-scrollable

• Wie können Benutzer nicht extern klicken, um das Bootstrap -Modalfeld zu schließen?

  Stellen Sie die Option auf fest. backdrop 'static'

• Unterstützt Bootstrap -Modalboxen mobile Geräte?

  unterstützt und reaktionsschnell.

Das obige ist der detaillierte Inhalt vonBootstrap -Modale verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!