Bootstrap | Modal Plugin
Die Bootstrap -Modalkomponente ist ein Dialogfeld, das auf dem Bildschirm angezeigt wird. Es enthält den Inhalt wie Titel, Text, Schaltflächen usw. Es ist benutzerfreundlich und flexibel, Inhalte in einer Webanwendung anzuzeigen. Darüber hinaus können Sie sein Aussehen so ändern, dass Sie in den Stil Ihrer Anwendung passen.
Diese Beschreibung führt Sie zu:
- Was ist ein modales Plugin?
- So erstellen Sie ein Modal in Bootstrap?
- So stellen Sie die modale Größe in Bootstrap ein?
Was ist ein modales Plugin?
Das Modal -Plugin verwendet JavaScript- oder Datenattribute, um den Inhalt nach Bedarf zu öffnen oder auszublenden. Insbesondere handelt es sich um ein Dialog- oder Popup-Feld, das oben auf der Seite angezeigt wird.
So erstellen Sie ein Modal in Bootstrap?
Um ein Modal in Bootstrap zu erstellen, befolgen Sie die genannten Schritte.
Schritt 1: Erstellen Sie eine Schaltfläche, um das Modal auszulösen
Erstellen Sie zunächst eine Schaltfläche. Die in diesem Element verwendeten Hauptattribute sind “Data-Toggle" Und "Datenziel”. Schauen Sie sich dazu die folgenden Anweisungen an:
- Das Schaltflächenelement wird mit der “erstelltBtn","Btn-Primary", Und "Btn-lg" Klassen.
- Präzisiere das "Data-Toggle”Attribut, das das Modalfenster öffnet.
- “Datenziel”Zeigt auf die ID des Modals.
Hier ist der HTML -Code:
Ausgang
Schritt 2: Erstellen Sie ein modales Fenster
Das Modalfenster wird erstellt, indem die Schritte folgt:
- Füge hinzu ein "Element und zuweisen Sie es die ID. Diese ID muss mit dem übereinstimmenDatenzielWert des Attributs. In unserem Fall, "demomodal”Wird als Container -ID spezifiziert.
- “modalDie Klasse hebt und erkennt den Inhalt des DIV als Modal.
- “verblassen”Klasse wendet den Übergangseffekt des Fade-In- und Fade-Outs auf das Modalfenster an. Sie können diese Klasse problemlos entfernen, wenn Sie sie nicht wollen.
- “Modal-DialogDie Klasse passt die Breite und den Rand des modalen Dialogs an. Der Inhalt des Modals wird im erstellten Container angegeben.
Hier ist die Umsetzung des oben diskutierten Szenarios:
Schritt 3: Geben Sie den modalen Inhalt an
Der Inhalt des Modals wird im Div -Container mit Klasse angegeben “Modal-Dialog”. Die folgenden Schritte werden implementiert, um Inhalte hinzuzufügen:
- Zuerst fügen Sie eine "hinzu""Element mit der Klasse"Modal-Inhalt”.
- Erstellen Sie im Inneren einen Header, einen Körper und eine Fußzeile, indem Sie die Klassen verwendenModal-Header","Modal-Körper", Und "Modal-Footer”.
- Geben Sie innerhalb des Headers eine Schließschaltfläche und den Titel mit der “anModal-Title" Klasse.
- Geben Sie dann den Körperteil an, indem Sie das verwenden. “Modal-Körper" Klasse.
- Erstellen Sie nach dem Kopf und Körper eine Fußzeile, indem Sie die “anwenden“Modal-Footer" Klasse. Der Fußzeilenteil enthält die Taste, die das Modalfenster schließt:
LinuxHint
LinuxHint ist die beste Tutorial -Website.
Ausgang
So stellen Sie die modale Größe in Bootstrap ein?
Die Größe des Modalfensters kann mit der “bestimmt werdenmodal-*"Klasse, wo das Sternchen"*Symbol zeigt die Größe des Modalfensters an.
Kleines Modalfenster
Im folgenden Beispiel das “"Element mit Klasse"Modal-Dialog”Wird eine Klasse zugewiesen“Modal-SM”:
Infolgedessen wird das Modalfenster in kleiner Größe geöffnet:
Großes Modalfenster
Jetzt die Klasse “Modal-lg”Wird angegeben, um das Modalfenster in großer Größe zu öffnen:
Ausgang
Das ist alles um das Modal -Plugin.
Abschluss
Um ein Modal in Bootstrap zu erstellen, erstellen Sie zunächst eine Schaltfläche oder einen Link, mit dem das Modal ausgelöst wird. Erstellen Sie dann das modale Fenster mit der Klasse “modal" Und "Modal-Dialog”. Geben Sie im Container den Inhalt des Modals mit der “anModal-Inhalt”. Verwenden Sie die “Modal-Title","Modal-Körper", Und "Modal-FooterKlassen, um den Titel, den Modal-Körper des Modals und den Fußzeilen von Modal hinzuzufügen. Dieser Beitrag hat erklärt, was ein modales Plugin ist und wie es erstellt wird.