Bootstrap slett bekreftelsesmodal

Bootstrap er et godt likt front-end-rammeverk som forenkler design og utvikling av nettbaserte applikasjoner. Mer spesifikt er slettbekreftelsesmodalen en nyttig funksjon som er levert av Bootstrap. Det kan brukes til å be brukeren om bekreftelse før du faktisk sletter noe. Dette er en god måte å unngå tilfeldige slettinger og gjøre brukeren oppmerksom på konsekvensene av deres handlinger.

Denne oppskrivningen vil beskrive hvordan du oppretter en Slett bekreftelsesmodal i Bootstrap.

Hvordan lage en bootstrap slett bekreftelsesmodal?

For å opprette en slett bekreftelsesmodal i Bootstrap, kan du prøve de gitte instruksjonene:

• Først må du lage en knapp som vil utløse modalvinduet. “Datapål”Attributt tildeles verdien”#deletemodal”Som peker på IDen til modalen.
• Opprett deretter en modal ved hjelp av "modal”Og“falme”Klasser.
• “Modal-dialog”Klasse oppretter dialogboksen.
• Deretter legger du til “Modal-Content”Klasse for å spesifisere innhold i Modal -vinduet. Innen denne klassen, inkludert klassen “Modal-header”.
• “Modal-header”Oppretter overskriften til modalvinduet. Den inneholder tittelen og lukkeknappen.
• Deretter oppretter du kroppsdelen ved å spesifisere klassen som "Modal-kropp”. Det består av lappen som vises i dialogboksen.
• Til slutt, lag den modale bunnteksten ved å legge til “Modal-foot”Klasse. Denne bunntekst inneholder også to knapper.

Her er HTML -koden til det diskuterte scenariet:

Slett elementet

Modal tittel

"sant"> ×

Er du sikker på at du vil slette?

Det kan observeres at vi har laget en bootstrap slett bekreftelsesmodal:

Slik kan du opprette en slettbekreftelsesmodal ved hjelp av Bootstrap.

Konklusjon

For å opprette en Slett bekreftelsesmodal, oppretter du først en knapp ved hjelp av klassene "btn”, Og“Btn-Danger”Klasser som utløser modalvinduet og legger til attributtet“Datapål”Med verdien“ id ”til modalen. Opprett deretter modalvinduet ved å bruke "modal”Klasse og ID. Deretter spesifiser innholdet i modalen ved å bruke "Modal-Content”,“Modal-header”,“Modal-kropp”, Og“Modal-foot”Klasser. Denne oppskrivningen har vist hvordan du oppretter en Slett bekreftelsesmodal i Bootstrap.