So stylen Sie das Bootstrap -Modal

Das Popup-Fenster bezieht sich auf das kleine Fenster auf dem Bildschirm des vorhandenen Fensters. Es wird verwendet, um zusätzliche oder neue Informationen in jeder Anwendung anzuzeigen. Manchmal ist es auch als Werbung bekannt. Bootstrap bietet viele Klassen, mit denen modale Fenster problemlos erstellt werden können. Mit CSS kann das Modalfenster jedoch nach Ihren Vorlieben gestaltet werden.

In diesem Artikel wird beschrieben, wie das Bootstrap-Modal gestylt wird.

So stylen Sie das Bootstrap -Modal?

Um zu lernen, wie man das Bootstrap -Modal stymt, befolgen Sie die folgenden Schritte.

Schritt 1: Erstellen Sie eine HTML -Datei

Erstellen Sie zunächst ein Modal, indem Sie den unten angegebenen Anweisungen folgen:

• Ein ... kreieren ""Container und zuweisen Sie ihm eine Klasse"Hauptmodalcontainer”.
• Fügen Sie dann eine Schaltfläche hinzu, die das Modalfenster auslöst. Zuweisen Sie es die “Btn","Btn-Primary", Und "Showmodal" Klassen. Setzen Sie die Datenattribute “Data-Toggle"Mit dem Wert"modal" und das "Datenziel" mit dem "#mymodal" Wert. Diese ID zeigt auf die ID des Modalfensters.
• Erstellen Sie als Nächstes das Modal -Fenster. Um dies zu tun, fügen Sie eine "hinzu""Element und zuweisen"modal" Und "verblassenKlassen und setzen Sie die ID fest.
• Füge hinzu ein "”Für das Dialogfeld des Modals und zuweisen Sie es die“Modal-Dialog" Klasse.
• Geben Sie dann den Inhalt des Modals in einem „“ an und weisen Sie ihm die Klasse zu “zuModal-Inhalt”.
• Machen Sie mit der Klasse einen Schließknopf “schließen”. Der "Data-DismissDas Attribut wird verwendet, um das Modalfenster zu schließen.
• Geben Sie dann den modalen Körper mit den Klassen an “Modal-Körper" Und "Reihe”. Nehmen Sie darin eine Spalte mit 6 Gittern für das Bild und 6 für den Inhalt.
• Das Bild wird mit dem “eingebettet" Schild.
• Dann im Inneren "”Element mit dem“InhaltKlasse, fügen Sie den Titel, den Untertitel und die Beschreibung hinzu.
• Danach platzieren Sie eine Taste mit der Bootstrap “Btn","Btn-danger", Und "P-2" Klassen:

Modal anzeigen




×

Sonderangebot

20% Rabatt auf Takeout und Lieferung

Beste Qualitätshemden. Jede Größe ist verfügbar. Leicht waschbar.

MEHR SEHEN

Schritt 2: Stil „Hauptmodal-Container“ -Klasse

Der gesamte Behälter ist mit dem CSS gestaltet “Schriftfamilie" Eigentum:

.Hauptmodal-Container
Schriftfamilie: 'Poppins', sans-serif;

Schritt 3: Stil „Show-Modal“ -Klasse

Der "ShowmodalDie Klasse wird mit den folgenden Eigenschaften deklariert:

.Hauptmodalcontainer .Show-Modal
Farbe: #fff;
Hintergrundfarbe: #3A97C9;
Texttransformation: Kapitalisieren;
Polsterung: 10px 15px;
Rand: 80px Auto 0;
Bildschirmsperre;

Hier:

• “Farbe”Legt die Schriftfarbe fest.
• “Hintergrundfarbe”Legt die Hintergrundfarbe des Elements fest.
• “Texttransformierung”Kapitalisiert den Text.
• “Polsterung”Passt Platz um den Inhalt des Elements an.
• “Rand”Erzeugt Raum um das Element.
• “Anzeige"Mit dem Wert"Block”Setzt die Breite des Elements auf 100%.

Schritt 4: Stil „Modal-Dialog“ -Klasse auf Fade

.modal.verblassen .modal-dialog
Transformation: Skala (0);
Übergang: Alle 450 ms kubisch-ebierter (.47, 1.64, .41, .8);

Wenn das Modal verblasst, werden die folgenden CSS -Eigenschaften auf die “angewendet“Modal-Dialog" Klasse:

• “verwandelnEigentum mit dem "Skala()Der Wert steigt oder verringert die Größe des Elements vertikal oder horizontal.
• “Übergang”Bewegt allmählich das Element. Der "Kubik-Bezier ()Die Funktion wendet die kubische Bezier -Kurve an. Es wird durch vier Punkte bestimmt.

Schritt 5: Stil „Modal-Dialog“ -Klasse in der Show

.modal.zeigen .modal-dialog
Transformation: Skala (1);

Das CSS “verwandeln”Eigenschaft mit dem Wert“Skala (1)”Erhöht die Größe des Dialogfelds.

Schritt 6: Stil „Modal-In-Incontent“ -Klasse

.Hauptmodalcontainer .Modal-Dialog .Modal-Inhalt
Grenzradius: 30px;
Grenze: Keine;
Überlauf versteckt;

Der "Modal-Inhalt”Ist mit den folgenden Eigenschaften dekoriert:

• “Grenzradius”Rundet die Kanten des Elements ab.
• “Grenze"Mit dem Wert"keiner”Versteckt die Grenze.
• “Überlauf”Steuert den Fluss des Inhalts.

Schritt 7: Stil „Schließen“ Klasse

.Hauptmodalcontainer .Modal-Dialog .Modal-Inhalt .schließen
Farbe: #747474;
Hintergrundfarbe: RGBA (255, 255, 255, 0.5);
Höhe: 27px;
Breite: 27px;
Polsterung: 0;
Deckkraft: 1;
Überlauf versteckt;
Position: absolut;
Rechts: 15px;
Top: 15px;
Z-Index: 2;

Hier:

• “Opazität”Definiert die Transparenzstufe des Elements.
• “Position"Mit dem Wert"absolut”Legt die Position des Elements relativ zu seiner übergeordneten Position fest.
• “Rechts" Und "Spitze”Stellen Sie Platz rechts und oben auf der Schließknopf ein.
• “Z-IndexGibt die Stapelbestellung des Elements an. Die größere Stapelordnung bringt das Element auf die Vorderseite.

Schritt 8: Stil „Modal-Body“ -Klasse

.Hauptmodalcontainer .Modal-Dialog .Modal-Inhalt .Modal-Körper
Polsterung: 0 !wichtig;

Der Raum um den gesamten Modalkörper wird von CSS angepasst “Polsterung" Eigentum. Darüber hinaus die “!wichtigDas Schlüsselwort wird verwendet, um die Bedeutung des Elements festzulegen.

Schritt 9: Stil „IMG“ Element

.Hauptmodalcontainer .Modal-Dialog .Modal-Inhalt .Modal-Körper .Modal-Image img
Höhe: 100%;
Breite: 100%;

Schritt 10: Stylen Sie die "Inhalts" -Klasse

.Hauptmodalcontainer .Modal-Dialog .Modal-Inhalt .Modal-Körper .Inhalt
Polsterung: 35px 30px;

Durch Verwendung der “Polsterung”Eigenschaft, der Raum wird um die" hinzugefügt "InhaltInhalt der Klasse.

Schritt 11: Stil „Titel“ -Klasse

.Hauptmodalcontainer .Modal-Dialog .Modal-Inhalt .Modal-Körper .Titel
Farbe: #fb3640;
Schriftfamilie: 'Sacramento', kursiv;
Schriftgröße: 35px;

Hier:

• “Schriftfamilie”Definiert den Stil der Schriftart.
• “Schriftgröße”Legt die Größe der Schrift fest.

Schritt 12: Stil „Untertitel“ -Klasse

.Hauptmodalcontainer .Modal-Dialog .Modal-Inhalt .Modal-Körper .Untertitel
Schriftgewicht: 600;
Texttransformierung: Großbuchstaben;
Rand: 0 0 20px;
Bildschirmsperre;

Nach dem angegebenen Code -Snippet:

• “Schriftgewicht”Setzt die Dicke der Schriftart.
• “Texttransformierung”Legt den Schriftfall fest.

Ausgang

So können Sie das Bootstrap -Modal stylen.

Abschluss

Um das Bootstrap -Modalfenster zu stylen, fügen Sie zunächst die Schaltfläche hinzu, die das Modal auslöst. Machen Sie dann das modale Fenster mithilfe von HTML -Elementen. Fügen Sie danach mehrere CSS -Eigenschaften hinzu, einschließlich “Polsterung","Rand","Farbe","Übergang”, Und vieles mehr, um das modale Fenster zu stylen. Genauer gesagt das “Kubik-BezierDie Funktion wird verwendet, um den Übergangseffekt in einer vier Punkte -Kurve im Modalfenster anzuwenden. Dieser Beitrag hat das Verfahren erläutert, um das Bootstrap -Modal zu stylen.