Hvordan lukke et bootstrap modal vindu ved hjelp av jQuery?

JQuery er et funksjonsrikt, enkelt og raskt JavaScript-bibliotek som hjelper til med å manipulere HTML-dokumentet i hendelseshåndtering, manipulasjon, animasjon og mer. Mer spesifikt kan det brukes til å legge til modellvinduet på en webside. Denne modellen er representert som et popup-vindu eller en dialogboks som vises på toppen av det nåværende vinduet.

Dette innlegget vil spesifikt forklare prosedyren for å lukke et bootstrap modalvindu ved hjelp av jQuery.

Hvordan bruke jQuery for å lukke et bootstrap modal vindu?

Vi vil utdype det nevnte emnet ved å dekke følgende trinn:

• Trinn 1: Opprett bootstrap modal vindu i HTML
• Trinn 2: Lukk Bootstrap Modal -vinduet ved hjelp av jQuery

Trinn 1: Opprett bootstrap modal vindu i HTML

Ved å bruke Bootstrap Modal -klassene, kan modalvinduet opprettes effektivt:

• Først lager du et knappelement som vil utløse modalen i Bootstrap ved å bruke dataattributtene “Data-toggle”Og“Datapål”.
• Lag deretter modalvinduet ved å bruke klassen "modal”Og“falme”.
• “Modal-dialog”,“Modal-Content”,“Modal-header”,“Modal-title”,“Modal-kropp”, Og“Modal-foot”Er klassene som er implementert i den nedenfor-nevnte koden for å etablere en fleksibel modal dialogboks:

Start modal

Tittel

-skjult = "sant"> ×

Velkommen til Linuxhint!

Lukk
Lagre

Trinn 2: Lukk Bootstrap Modal -vinduet ved hjelp av jQuery

Generelt, data attributtet “Data-Dismiss”Med verdien”modal”Er spesifisert for å lukke modal dialogboks. Denne attributtet brukes på knappelementet for å lukke vinduet.

I vårt scenario er vi interessert i å implementere jQuery for å lukke popup -vinduet. Så la oss diskutere det ved hjelp av implementering:

• For det første, inkluder "”Tag i HTML.
• Spesifiser $ () -funksjonen som returnerer IDen til elementet. Knytte den til klikkhendelsen og koble den til funksjonen som vil påkalle ved klikk.
• Inne i funksjonen, nevn koden “$ ('#Welcomemodal').Modal ('skjul')”Det betyr at ID”Welcomemodal”Kommer til å bli skjult ved å bruke“Modal ('skjul')”Funksjon:

Produksjon

På denne måten kan du lukke et bootstrap modal vindu ved hjelp av jQuery.

Konklusjon

For å lukke et Bootstrap Modal -vindu ved å bruke jQuery, oppretter du et modalt vindu ved hjelp av Bootstrap -klassene. Implementere jQuery -funksjonen "$ ()”For å få ID -en til elementet og deretter knytte“Modal ('skjul')”Funksjon med det. Denne oppskrivningen har illustrert hvordan man implementerer jQuery for å lukke et Bootstrap Modal-vindu.