Come chiudere una finestra modale bootstrap usando jQuery?

JQuery è una libreria JavaScript ricca di funzionalità, facile e veloce che aiuta a manipolare il documento HTML nella gestione degli eventi, nella manipolazione, nell'animazione e altro ancora. Più specificamente, può essere utilizzato per l'aggiunta della finestra del modello su una pagina web. Questo modello è rappresentato come una finestra pop-up o una finestra di dialogo visualizzata nella parte superiore della finestra corrente.

Questo post spiegherà specificamente la procedura per chiudere una finestra modale bootstrap usando jQuery.

Come usare jQuery per chiudere una finestra modale bootstrap?

Elaboreremo l'argomento menzionato coprendo i seguenti passaggi:

• Passaggio 1: creare finestra modale bootstrap in HTML
• Passaggio 2: chiudere la finestra modale bootstrap usando jQuery

Passaggio 1: creare finestra modale bootstrap in HTML

Usando le classi modali bootstrap, la finestra modale può essere creata in modo efficiente:

• Innanzitutto, crea un elemento pulsante che attiverà il modale in bootstrap utilizzando gli attributi di dati "Data-Toggle" E "target dati".
• Quindi, crea la finestra modale usando la classe "modale" E "dissolvenza".
• IL "Dialog modale","contenuto modale","Modal-Header","Title modale","corpo modale", E "footer modale"Sono le classi implementate nel codice di seguito per stabilire una finestra di dialogo modale flessibile:

Lancio modale

Titolo

-nascosto = "vero"> ×

Benvenuti in Linuxhint!

Vicino
Salva

Passaggio 2: chiudere la finestra modale bootstrap usando jQuery

Generalmente, l'attributo dei dati "Data-Dismiss"Con il valore"modale"È specificato per chiudere la finestra di dialogo modale. Questo attributo viene applicato all'elemento pulsante per chiudere la finestra.

Nel nostro scenario, siamo interessati a implementare jQuery per chiudere la finestra popup. Quindi, discutiamo con l'aiuto dell'implementazione:

• In primo luogo, includi il ""Tag in HTML.
• Specificare la funzione $ () che restituisce l'ID dell'elemento. Associarelo all'evento click e collegarlo alla funzione che invocherà clicca.
• All'interno della funzione, menziona il codice "$ ('#welcomemodale').modale ('nascondi')"Ciò significa che l'ID"benvenuto"Sarà nascosto utilizzando il"modale ('nascondi')" funzione:

Produzione

In questo modo, puoi chiudere una finestra modale bootstrap usando jQuery.

Conclusione

Per chiudere una finestra modale bootstrap utilizzando jQuery, crea una finestra modale usando le classi bootstrap. Implementa la funzione jQuery "$ ()"Per ottenere l'ID dell'elemento e quindi associare il"modale ('nascondi')"Funzione con esso. Questo articolo ha illustrato come implementare jQuery per chiudere una finestra modale bootstrap.