Wie erreiche ich einen Maskenebeneneffekt in Bootstrap? (Codebeispiel)

Der folgende Artikel stellt Ihnen die Methode von Bootstrap vor, um den Maskenebeneneffekt zu erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Empfohlene verwandte Tutorials: „Bootstrap-Tutorial“

Das Effektbild sieht wie folgt aus:

1. Klicken Sie auf die Schaltfläche zum Öffnen der Maskenebene 🔜 Sie müssen eine Art Auslöser haben. Sie können Schaltflächen oder Links verwenden. Hier verwenden wir Schaltflächen.

Wenn Sie sich den Code oben genau ansehen, werden Sie feststellen, dass im -Tag data-target="#myModal" das Ziel des Modals ist, das Sie auf der Seite laden möchten. Sie können mehrere Modale auf der Seite erstellen und dann für jedes Modal unterschiedliche Trigger erstellen. Natürlich können Sie nicht mehrere Module gleichzeitig laden, aber Sie können mehrere Module auf der Seite erstellen, die zu unterschiedlichen Zeiten geladen werden.

Sie müssen auf zwei Punkte in der Modalbox achten:

Der erste ist .modal, der verwendet wird, um den Inhalt von

zu identifizieren.

Die zweite ist die .fade-Klasse. Wenn das Modal umgeschaltet wird, wird der Inhalt ein- und ausgeblendet.

Attribut aria-hidden="true" wird verwendet, um das modale Fenster unsichtbar zu halten, bis der Auslöser ausgelöst wird (z. B. Klicken auf die entsprechende Schaltfläche).

, modal-header ist eine Klasse, die Stile für den Header modaler Fenster definiert.

class="close", close ist eine CSS-Klasse, die zum Formatieren der Schließschaltfläche eines modalen Fensters verwendet wird.
• data-dismiss="modal" ist ein benutzerdefiniertes HTML5-Datenattribut. Hier wird es zum Schließen des modalen Fensters verwendet.
• class="modal-body" ist eine CSS-Klasse von Bootstrap CSS, die zum Festlegen von Stilen für den Körper modaler Fenster verwendet wird.
• class="modal-footer" ist eine CSS-Klasse von Bootstrap-CSS, die zum Gestalten des unteren Rands modaler Fenster verwendet wird.
  • data-toggle="modal", benutzerdefiniertes HTML5-Datenattribut data-toggle wird verwendet, um ein modales Fenster zu öffnen.
  Weitere Kenntnisse zum Thema Programmierung finden Sie unter:
Programmierunterricht
• ! !

Das obige ist der detaillierte Inhalt vonWie erreiche ich einen Maskenebeneneffekt in Bootstrap? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!