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:

<a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">點擊打開模態(tài)框</a>

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:

<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">基本模態(tài)框</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>模態(tài)框主體</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>

Die übergeordnete Div der Modal -Box sollte die gleiche wie die im obigen Triggerelement verwendete ID entsprechen. In diesem Fall ist es http://ipnx.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:

<a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="btn btn-lg btn-success" data-toggle="modal" data-target="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bbasicModal">點擊打開模態(tài)框</a>

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

<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">基本模態(tài)框</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>模態(tài)框主體</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>

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

• 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') $('http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyModal').modal('show');

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

  Verwenden Sie die Methode wie . .modal('hide') $('http://ipnx.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!