Bootstrap | Modal plugin

Bootstrap Modal -komponenten er en dialogboks som vises på skjermen. Det inneholder innholdet som tittel, tekst, knapper osv. Det er brukervennlig og fleksibelt å vise innhold i en webapplikasjon. I tillegg kan du endre utseendet for å passe til stilen på applikasjonen din.

Denne oppskrivningen vil guide deg om:

• Hva er en modal plugin?
• Hvordan lage en modal i bootstrap?
• Hvordan justere den modale størrelsen i bootstrap?

Hva er en modal plugin?

Den modale plugin bruker JavaScript eller dataattributter for å åpne eller skjule innholdet etter behov. Mer spesifikt er det en dialog eller popup-boks som vises øverst på siden.

Hvordan lage en modal i bootstrap?

Følg de nevnte trinnene for å lage en modal i Bootstrap.

Trinn 1: Opprett en knapp for å utløse modalen

Først må du lage en knapp som utløser modalvinduet ved å bruke knappen eller koble elementer. De viktigste attributtene som brukes i dette elementet er “Data-toggle”Og“Datapål”. For å gjøre det, sjekk ut følgende instruksjoner:

• Knappelementet opprettes ved hjelp av “btn”,“btn-primary”, Og“btn-lg”Klasser.
• Spesifiser “Data-toggle”Attributt som åpner modalvinduet.
• “Datapål”Peker på modalens ID.

Her er HTML -koden:

Åpne modal

Produksjon

Trinn 2: Opprett et modalt vindu

Modalvinduet opprettes ved å følge trinnene:

• Legg til en "”Element og tilordne det IDen. Denne IDen må samsvare med “Datapål”Attributts verdi. I vårt tilfelle, “Demomodal”Er spesifisert som container -ID.
• “modal”Klassen fremhever og gjenkjenner innholdet i Div som en modal.
• “falme”Klassen bruker fade-in og fade-out overgangseffekt til modalvinduet. Du kan enkelt fjerne denne klassen hvis du ikke vil ha den.
• “Modal-dialog”Klassen justerer bredden og marginen i modaldialogen. Modalens innhold er spesifisert i den opprettede beholderen.

Her er implementeringen av det ovennevnte scenariet:

Trinn 3: Spesifiser det modale innholdet

Innholdet i modalen er spesifisert i DIV -beholderen som har klasse "Modal-dialog”. Under trinn implementeres for å legge til innhold i det:

• Først, legg til en "”Element med klassen“Modal-Content”.
• Inne i dette, lag en overskrift, kropp og bunntekst ved å bruke klassene “Modal-header”,“Modal-kropp”, Og“Modal-foot”.
• Innenfor overskriften, spesifiser en nærknapp og tittelen ved å bruke "Modal-title”Klasse.
• Deretter spesifiser kroppsdelen ved å bruke ”Modal-kropp”Klasse.
• Etter overskrift og kropp, lag en bunntekst ved å bruke “Modal-foot”Klasse. Undertekstdelen inneholder knappen som lukker modalvinduet:

×

Linuxhint

Linuxhint er det beste opplæringsnettstedet.

Produksjon

Hvordan justere den modale størrelsen i bootstrap?

Størrelsen på modalvinduet kan bestemmes ved bruk av “Modal-*”Klasse, der stjerne”*”Symbol indikerer størrelsen på modalvinduet.

Lite modal vindu

I eksemplet nedenfor, "”Element som har klasse“Modal-dialog”Er tildelt en klasse“Modal-SM”:

Som et resultat vil modalvinduet åpne seg i en liten størrelse:

Stort modalt vindu

Nå, klassen “Modal-LG”Er spesifisert for å åpne opp modalvinduet i stor størrelse:

Produksjon

Det handler om den modale plugin.

Konklusjon

For å lage en modal i Bootstrap, oppretter du først en knapp eller lenke som vil utløse modalen. Opprett deretter modalvinduet ved hjelp av klassen "modal”Og“Modal-dialog”. Inne i beholderen, spesifiser modalens innhold ved å bruke "Modal-Content”. Bruk “Modal-title”,“Modal-kropp”, Og“Modal-foot”Klasser for å legge til modalens tittel, Modal-Body og Modals bunntekst. Dette innlegget har forklart hva en modal plugin er og hvordan du lager det.