Como fechar uma janela modal de bootstrap usando jQuery?

O JQuery é uma biblioteca JavaScript rica em recursos, fácil e rápida que ajuda a manipular o documento HTML em manuseio de eventos, manipulação, animação e muito mais. Mais especificamente, ele pode ser utilizado para adicionar a janela do modelo em uma página da web. Este modelo é representado como uma janela pop-up ou uma caixa de diálogo que é exibida na parte superior da janela atual.

Este post explicará especificamente o procedimento para fechar uma janela modal de bootstrap usando jQuery.

Como usar o jQuery para fechar uma janela modal de bootstrap?

Vamos elaborar o tópico mencionado, cobrindo as seguintes etapas:

• Etapa 1: Crie janela modal de bootstrap em html
• Etapa 2: Feche a janela modal de bootstrap usando jQuery

Etapa 1: Crie janela modal de bootstrap em html

Usando as classes modais de bootstrap, a janela modal pode ser criada com eficiência:

• Primeiro, crie um elemento de botão que acionará o modal no bootstrap usando os atributos de dados “Data-Toggle" e "alvo de dados”.
• Em seguida, faça a janela modal usando a classe “modal" e "desaparecer”.
• O "modal-dialog","conteúdo modal","Modal-header","Título modal","corpo modal", e "Modal-Footer”São as classes implementadas no código abaixo mencionado para estabelecer uma caixa de diálogo modal flexível:

Iniciar modal

Título

-Hidden = "True"> ×

Bem -vindo ao Linuxhint!

Fechar
Salvar

Etapa 2: Feche a janela modal de bootstrap usando jQuery

Geralmente, o atributo de dados “Data-Dismiss"Com o valor"modal”É especificado para fechar a caixa de diálogo modal. Este atributo é aplicado ao elemento do botão para fechar a janela.

Em nosso cenário, estamos interessados ​​em implementar o jQuery para fechar a janela pop -up. Então, vamos discutir com a ajuda da implementação:

• Em primeiro lugar, inclua o “”Tag em html.
• Especifique a função $ () que retorna o ID do elemento. Associe -o ao evento de clique e conecte -o à função que invocará no clique.
• Dentro da função, mencione o código “$ ('#WelComemodal').modal ('hide')"Isso significa que o id"Bem -vindo”Vai ficar escondido utilizando o“modal ('hide')”Função:

Saída

Dessa forma, você pode fechar uma janela modal de bootstrap usando jQuery.

Conclusão

Para fechar uma janela modal de bootstrap utilizando jQuery, crie uma janela modal usando as classes de bootstrap. Implementar a função jQuery “$ ()”Para obter o ID do elemento e depois associar o“modal ('hide')”Funcionar com isso. Este artigo ilustrou como implementar o jQuery para fechar uma janela modal de bootstrap.