Modal er en dialogboks eller et popup -vindu som brukes til å gi viktig informasjon til brukeren før du tar handlinger eller flytter videre på en webside. I utgangspunktet brukes bootstrap 5 -modaler til å gi informasjon som øktetid, eller det vises når en bruker prøver å slette eller oppdatere noe. Dessuten brukes det til bekreftelsesformål eller for å vise skjult innhold på forespørsel.

Denne artikkelen handler om

• Hvordan lage en modal i bootstrap 5?
• Grunnleggende modal
• Legg animasjon til en modal
• Modale størrelser
• Sentrert modal
• Fullskjerm modal
• Responsiv modal på fullskjerm
• Rulle modal

Hvordan lage en modal

For å lage en modal, opprett først en div med .modal klasse sammen med dets unike id deretter pakke denne diven rundt en div med .Modal-dialog klasse, inne i denne diven skaper en annen div med .Modal-Content klasse og inne .Modal-Content div opprette tre div med .Modal-header, .Modal-kropp, .Modal-foot klasser.

.Modal-header DIV inneholder tittelen på modalen og dens oppsigelsesknapp.

.Modal-kropp DIV inneholder hovedinnholdet fra modalen.

.Modal-foot DIV inneholder kontrollknappene til modalen.

Grunnleggende modal

For å lage en grunnleggende modal, lage en div som bruker .modal klasse med unik id Etter det pakk denne diven rundt divene som inneholder .Modal-dialog, .Modal-Content, .Modal-header, .Modal-kropp og .Modal-foot klasser som vist i eksemplet.

Legg til kategorier

Dette modale eksemplet er å legge til kategorier

Åpne modal

Kategorier

Legg til
Lukk

Slik opprettes en grunnleggende modell.

Legg animasjon til en modal

For å legge til animasjon til din modale bruk .falme klasse med .modal klasse:

..

Slik blir fade -animasjon brukt på modal.

Uten animasjon

Fjern .falme klasse for å åpne modalen uten animasjon.

..

Slik ser en modal ut uten animasjon.

Modale størrelser

Modaler kan ha tre størrelser:

• Liten
• Stor
• Ekstra stor

Liten modal

Å lage en liten modal, .Modal-SM Klasse brukes:

..

Slik opprettes en liten modal.

Stor modal

Å lage en stor modal, .Modal-LG Klasse brukes:

..

Slik opprettes en stor modal.

Ekstra stor modal

For å skape en ekstra stor modal, .Modal-XL Klasse brukes:

..

Slik opprettes en ekstra stor modal.

Fullskjermmodaler

Hvis du vil at modalen din skal vises på fullskjerm, så bruk .Modal-Fullscreen klasse med .Modal-dialog klasse.

..

Slik opprettes en fullskjermmodal.

Responsive modaler med full skjerm

Vi kan også kontrollere når modalen vil vise seg som en fullskjermmodal. For det bruker du følgende klasser som krav.

• .Modal-Fullscreen-SM-Down Denne klassen viser fullskjerm modal når skjermstørrelsen er under 576px.
• .Modal-Fullscreen-MD-Down Denne klassen viser fullskjerm modal når skjermstørrelsen er under 768px.
• .Modal-Fullscreen-LG-Down Denne klassen viser fullskjerm modal når skjermstørrelsen er under 992px.
• .Modal-Fullscreen-XL-Down Denne klassen viser fullskjerm modal når skjermstørrelsen er under 1200px.
• .Modal-Fullscreen-xxl-down Denne klassen viser fullskjerm modal når skjermstørrelsen er under 1400px.

Sentrert modal

Bruk .Modal-dialog-sentrert klasse med .Modal-dialog For å vise modal vertikalt og horisontalt i midten av siden.

..

Rulle modal

En rullefelt blir automatisk lagt til en side når innholdet i en modell er stort.

Så det er ikke en god tilnærming å bla hele siden i stedet for å bla på modalen bare for å løse dette problemet, legg til en klasse .Modal-dialog-rollelig med .Modal-dialog klasse for å gjøre modalen rullbar

..

En rullbar modal er vellykket opprettet og fungerer helt greit.

Konklusjon

Modal er opprettet ved å bruke .modal klasse som vikler seg rundt andre div som inneholder .Modal-dialog, .Modal-Content, .Modal-header, .Modal-kropp, .Modal-foot . Ovennevnte artikkel skisserer den grunnleggende strukturen til Bootstrap 5 Modal med en overskrift, kropp og bunntekst som inneholder handlingsknapper for brukeren. Det viser også forskjellige modale typer som modale størrelser, modaler med eller uten animasjon, sentrert modal og responsive fullskjermmodaler.