Hvordan åpne et bootstrap modal vindu ved hjelp av jQuery?

Bootstrap-modaler gir en fleksibel og responsiv JavaScript-pop-up som brukes til å vise bilder, videoer og varsler på et nettsted. De er lokalisert over dokumentinnholdet. Bootstrap støtter imidlertid bare en enkelt modal om gangen. Vi kan bruke jQuery på forskjellige måter med Bootstrap for JavaScript -plugins som verktøytips, modaler og mer.

Denne oppskrivningen vil illustrere hvordan du lanserer en bootstrap-modal ved hjelp av jQuery.

Hvordan åpne et bootstrap modal vindu ved hjelp av jQuery?

JQuery er et enkelt, lett JavaScript -bibliotek som brukes til forskjellige formål sammen med JavaScript websider. For å åpne en bootstrap -modal ved hjelp av jQuery, gå gjennom de listede trinnene:

• Trinn 1: Opprett Bootstrap Modal -vindu i HTML -fil
• Trinn 2: Åpne Bootstrap Modal Window ved hjelp av jQuery

Trinn 1: Opprett Bootstrap Modal -vindu i HTML -fil

Implementere følgende kodebit i HTML -filen for å opprette en modal dialogboks:

• Først må du lage en knapp som vil bidra til å utløse modalvinduet for dette formålet, bruk "" stikkord.
• Deretter legger du til en "”Element med“modal”Og“falme”Klasser for å lage et modalt vindu.
• Juster dialogvinduet ved å bruke "Modal-dialog”Bootstrap Class. Gå etter det for å tildele innholdet ved å spesifisere "modal-content" -klassen i en egen "div" -beholder.
• Innen "Modal-header”, Definer tittelen og en nær knapp i høyre hjørne. Når du klikker, er modalvinduet lukket. Denne funksjonen foregår ved hjelp av attributtet “Data-Dismiss”. Det nære ikonet blir deretter laget ved å bruke “×”.
• Deretter bruker du "modal-body" -klassen i andre "div" som brukes til å spesifisere det modale innholdet.
• På slutten av kroppsseksjonen lager du to knapper i bunntekstdelen for å legge til “Avbryt”Og“lagre”Alternativer:

Start modal

Tittel

×

Velkommen til Linuxhint!

Avbryt
Lagre

Det kan observeres at ingen modal dukker opp:

Trinn 2: Åpne Bootstrap Modal Window ved hjelp av jQuery

Innen "”Tagger, spesifiser jQuery -koden som implementert nedenfor:

Følgende er beskrivelsen av ovennevnte jQuery-kode:

• “$ ()”Er snarveien av getElementById () -metoden og returnerer IDen til det spesifikke elementet.
• “.ved trykk')”Er en funksjon som genererer en kjøretid på klikk. For eksempel har vi beskrevet at når knappen med ID "lanseringsmodal”Klikket på, den spesifiserte funksjonen vil bli påkalt.
• "Funksjonen ()" brukes til å implementere funksjoner i JavaScript. Den spesifiserte funksjonen vil ta ID “#welcomemodal”Av modalvinduet og knytt det til jQuery”modal ('show')”Funksjon
• Den ovennevnte koden betyr at funksjonen vil vise modalvinduet på knappeklikk:

Vi har samlet JQuery -koden for å åpne Bootstrap Modal -vinduet.

Konklusjon

For å åpne et Bootstrap Modal -vindu ved hjelp av jQuery, skriv først HTML -koden for modalvinduet. Etter det, implementer jQuery -funksjonene. JQuery “modal ('show')”,“Modal ('skjul')”, Og“Modal ('Toggle')”Funksjoner brukes til dialogboksen Bootstrap Modal Windows. Denne oppskrivningen har illustrert prosedyren for å starte et bootstrap modal vindu med jQuery.