Hvordan style bootstrap modal

Pop-up-vinduet refererer til det lille vinduet på skjermen til det eksisterende vinduet. Det brukes til å vise ytterligere eller ny informasjon i alle applikasjoner. Noen ganger er det også kjent som en annonse. Bootstrap gir mange klasser som hjelper til med å lage modale vinduer enkelt. Imidlertid kan Modal -vinduet være designet i henhold til dine liker.

Denne oppskrivningen vil beskrive hvordan du kan style bootstrap-modalen.

Hvordan style bootstrap modal?

Følg trinnene nedenfor for å lære hvordan du styler oppstilen, følg trinnene nedenfor.

Trinn 1: Opprett en HTML -fil

Først må du lage en modal ved å følge instruksjonene gitt nedenfor:

• Lage en "”Container og tilordne den en klasse”Main-Modal-Container”.
• Legg deretter til en knapp som vil utløse modalvinduet. Tilordne det “btn”,“btn-primary”, Og“Show-Modal”Klasser. Angi dataattributtene “Data-toggle”Med verdien”modal" og "Datapål" med "#mymodal”Verdi. Denne ID -en peker på IDen til modalvinduet.
• Neste, lag Modal -vinduet. For å gjøre det, legg til en “”Element og tilordne det”modal”Og“falme”Klasser, og angi ID.
• Legg til en "”For dialogboksen til modalen og tilordne den“Modal-dialog”Klasse.
• Spesifiser deretter modalens innhold i en "" og tilordne det klassen "Modal-Content”.
• Lag en nær knapp med klassen "Lukk”. “Data-Dismiss”Attributt brukes til å lukke modalvinduet.
• Deretter spesifiser det modale legemet med klassene "Modal-kropp”Og“rad”. Inne i den, ta en kolonne med 6 rutenett for bildet og 6 for innholdet.
• Bildet er innebygd ved hjelp av “" stikkord.
• Da, inne i “”Element med“innhold”Klasse, legg til tittelen, undertittelen og beskrivelsen.
• Etter det, legg en knapp med bootstrap “btn”,“Btn-Danger”, Og“P-2”Klasser:

Se modal




×

Spesialtilbud

20% avslag på takeout og levering

Skjorter av beste kvalitet. Hver størrelse er tilgjengelig. Enkelt vaskbar.

SE MER

Trinn 2: Stil “Main-Modal-Container” -klasse

Hele beholderen er stylet med CSS “Font-familie”Eiendom:

.Main-Modal-Container
Font-Family: 'Poppins', Sans-serif;

Trinn 3: Stil “Show-Modal” -klasse

“Show-Modal”Klasse er erklært med følgende egenskaper:

.Main-Modal-Container .show-modal
Farge: #FFF;
Bakgrunnsfarge: #3A97C9;
Teksttransform: Kapitalisere;
polstring: 10px 15px;
Margin: 80px Auto 0;
Display: Block;

Her:

• “farge”Angir skriftfargen.
• “bakgrunnsfarge”Angir elementets bakgrunnsfarge.
• “Teksttransform”Kapitaliserer teksten.
• “polstring”Justerer plass rundt elementets innhold.
• “margin”Produserer plass rundt elementet.
• “vise”Med verdien”blokkere”Setter elementets bredde til 100%.

Trinn 4: Stil “Modal-Dialog” -klasse på Fade

.modal.falme .modal-dialog
Transform: skala (0);
Overgang: alle 450ms kubisk-bezier (.47, 1.64, .41, .8);

Når modalen blekner, blir følgende CSS -egenskaper brukt på "Modal-dialog”Klasse:

• “forvandle”Eiendom med“skala ()”Verdien øker eller reduserer elementets størrelse vertikalt eller horisontalt.
• “overgang”Flytter gradvis elementet. “Cubic-Bezier ()”Funksjon bruker den kubiske bezier -kurven. Det bestemmes av fire poeng.

Trinn 5: Stil “Modal-Dialog” -klasse på show

.modal.forestilling .modal-dialog
Transform: skala (1);

CSS “forvandle”Eiendom med verdien”skala (1)”Øker størrelsen på dialogboksen.

Trinn 6: Stil "Modal-Content" -klasse

.Main-Modal-Container .Modal-dialog .modal-content
Border-Radius: 30px;
Grense: Ingen;
overløp: skjult;

“Modal-Content”Er dekorert med følgende egenskaper:

• “Border-Radius”Runder elementets kanter.
• “grense”Med verdien”ingen”Skjuler grensen.
• “flyte”Kontrollerer innholdets flyt.

Trinn 7: Stil "Lukk" -klasse

.Main-Modal-Container .Modal-dialog .Modal-Content .Lukk
Farge: #747474;
Bakgrunnsfarge: RGBA (255, 255, 255, 0.5);
Høyde: 27px;
Bredde: 27px;
polstring: 0;
Opacitet: 1;
overløp: skjult;
Posisjon: Absolutt;
Til høyre: 15px;
Topp: 15px;
z-indeks: 2;

Her:

• “Opacitet”Definerer elementets gjennomsiktighetsnivå.
• “posisjon”Med verdien”Absolutt”Setter elementets posisjon i forhold til foreldresposisjonen.
• “Ikke sant”Og“topp”Sett plass til høyre og toppen av lukkeknappen.
• “Z-indeks”Angir elementets stabelrekkefølge. Den større stabelrekkefølgen bringer elementet foran.

Trinn 8: Stil "modal-body" -klasse

.Main-Modal-Container .Modal-dialog .Modal-Content .modal-body
Polstring: 0 !viktig;

Plass rundt hele modalkroppen justeres av CSS “polstring”Eiendom. Dessuten "!viktig”Nøkkelord brukes til å sette elementets betydning.

Trinn 9: Stil “IMG” -element

.Main-Modal-Container .Modal-dialog .Modal-Content .Modal-kropp .modal-image img
Høyde: 100%;
Bredde: 100%;

Trinn 10: Style "innholdet" -klassen

.Main-Modal-Container .Modal-dialog .Modal-Content .Modal-kropp .innhold
polstring: 35px 30px;

Ved å bruke “polstring”Eiendom, plassen blir lagt rundt“innhold”Klassens innhold.

Trinn 11: Stil "Tittel" -klasse

.Main-Modal-Container .Modal-dialog .Modal-Content .Modal-kropp .tittel
Farge: #FB3640;
Font-family: 'Sacramento', kursiv;
Font-størrelse: 35px;

Her:

• “Font-familie”Definerer fontens stil.
• “skriftstørrelse”Angir fontens størrelse.

Trinn 12: Stil "Sub-Title" -klasse

.Main-Modal-Container .Modal-dialog .Modal-Content .Modal-kropp .Undertittel
Fontvekt: 600;
Teksttransform: store bokstaver;
Margin: 0 0 20px;
Display: Block;

I følge den gitte kodebiten:

• “Fontvekt”Angir fontens tykkelse.
• “Teksttransform”Angir skrifttypen.

Produksjon

Slik kan du style bootstrap -modalen.

Konklusjon

For å style Bootstrap Modal -vinduet, legg først til knappen som vil utløse modalen. Lag deretter modalvinduet ved hjelp av HTML -elementer. Etter det, legg til flere CSS -egenskaper, inkludert "polstring”,“margin”,“farge”,“overgang”, Og mange flere for å style Modal -vinduet. Mer spesifikt, “Cubic-Bezier”Funksjon brukes til å anvende overgangseffekten i en fire punkter -kurve på modalvinduet. Dette innlegget har forklart prosedyren for å style bootstrap modal.