Come aprire una finestra modale bootstrap usando jQuery?

I modali Bootstrap forniscono un pop-up JavaScript flessibile e reattivo che viene utilizzato per mostrare immagini, video e avvisi su un sito Web. Si trovano sopra il contenuto del documento. Tuttavia, Bootstrap supporta solo un singolo modale alla volta. Possiamo utilizzare jQuery in vari modi con bootstrap per plug -in JavaScript come titoli, modali e altro ancora.

Questo articolo illustrerà come lanciare un modale bootstrap usando jQuery.

Come aprire una finestra modale bootstrap usando jQuery?

JQuery è una libreria JavaScript semplice e leggera utilizzata per vari scopi insieme alle pagine Web JavaScript. Per aprire un modale bootstrap usando jQuery, seguire i passaggi elencati:

• Passaggio 1: creare finestra modale bootstrap nel file HTML
• Passaggio 2: aprire la finestra modale bootstrap usando jQuery

Passaggio 1: creare finestra modale bootstrap nel file HTML

Implementare il seguente frammento di codice nel file HTML per creare una finestra di dialogo modale:

• Innanzitutto, crea un pulsante che contribuirà a attivare la finestra modale per questo scopo, utilizzare il “"Tag.
• Quindi, aggiungi un ""Elemento con il"modale" E "dissolvenza"Classi per creare una finestra modale.
• Regola la finestra di dialogo utilizzando il "Dialog modale"Classe Bootstrap. Successivamente, vai per allocare il contenuto specificando la classe "contento modale" in un contenitore "div" separato.
• All'interno del "Modal-Header", Definisci il titolo e un pulsante di chiusura nell'angolo destro. Quando è cliccata, la finestra modale è chiusa. Questa funzione avviene usando l'attributo "Data-Dismiss". L'icona vicina viene quindi realizzata usando il "×".
• Successivamente, utilizzare la classe "modale-corpo" in altri "div" utilizzati per specificare il contenuto modale.
• Alla fine della sezione del corpo, crea due pulsanti nella parte del piè di pagina per aggiungere "Annulla" E "salva" opzioni:

Lancio modale

Titolo

×

Benvenuti in Linuxhint!

Annulla
Salva

Si può osservare che non viene visualizzato alcun modale:

Passaggio 2: aprire la finestra modale bootstrap usando jQuery

All'interno del ""Tag, specificare il codice jQuery come implementato di seguito:

Di seguito è riportata la descrizione del codice jQuery sopra indicato:

• IL "$ ()"È il collegamento del metodo getElementById () e restituisce l'ID dell'elemento specifico.
• ".al clic')"È una funzione che genera un evento di runtime su clic. Ad esempio, l'abbiamo descritto quando il pulsante con l'ID "Launch-Modal"Si fa clic, la funzione specificata verrà invocata.
• La "function ()" viene utilizzata per implementare le funzioni in JavaScript. La funzione specificata prenderà l'ID "#welcomemodal"Della finestra modale e associarla al jQuery"modale ('show')" funzione
• Il codice sopra indicato indica che la funzione mostrerà la finestra modale sul pulsante Click:

Abbiamo compilato correttamente il codice jQuery per aprire la finestra modale bootstrap.

Conclusione

Per aprire una finestra modale bootstrap usando jQuery, prima, scrivi il codice HTML per la finestra modale. Successivamente, implementa le funzioni jQuery. Il jQuery "modale ('show')","modale ('nascondi')", E "modale ('toggle')"Le funzioni vengono utilizzate per la finestra di dialogo modale modale bootstrap. Questo articolo ha illustrato la procedura per avviare una finestra modale bootstrap con jQuery.