Como abrir uma janela modal de bootstrap usando jQuery?

Os modais de bootstrap fornecem um pop-up javascript flexível e responsivo que é usado para mostrar imagens, vídeos e alertas em um site. Eles estão localizados sobre o conteúdo do documento. No entanto, o bootstrap suporta apenas um único modal por vez. Podemos utilizar jQuery de várias maneiras com bootstrap para plugins JavaScript, como dicas de ferramentas, modais e muito mais.

Este artigo ilustrará como lançar um modal de bootstrap usando jQuery.

Como abrir uma janela modal de bootstrap usando jQuery?

JQuery é uma biblioteca JavaScript simples e leve usada para vários propósitos, juntamente com as páginas da Web JavaScript. Para abrir um modal de bootstrap usando jQuery, siga as etapas listadas:

• Etapa 1: Crie janela modal de bootstrap no arquivo html
• Etapa 2: Abra a janela modal de bootstrap usando jQuery

Etapa 1: Crie janela modal de bootstrap no arquivo html

Implemente o seguinte snippet de código no arquivo HTML para criar uma caixa de diálogo modal:

• Primeiro, crie um botão que ajudará a acionar a janela modal para esse fim, utilizar o “" marcação.
• Então, adicione um “”Elemento com o“modal" e "desaparecer”Classes para criar uma janela modal.
• Ajuste a janela de diálogo utilizando o “modal-dialog”Classe de bootstrap. Depois disso, vá para alocar o conteúdo especificando a classe "Conteúdo Modal" em um contêiner "Div" separado.
• Dentro do "Modal-header”, Defina o título e um botão de fechamento no canto direito. Quando clicado, a janela modal é fechada. Esta função ocorre usando o atributo “Data-Dismiss”. O ícone próximo é então feito usando o “×”.
• Em seguida, utilize a classe "Modal-Corpo" em outra "div" usada para especificar o conteúdo modal.
• No final da seção do corpo, crie dois botões na parte do rodapé para adicionar “cancelar" e "salvar”Opções:

Iniciar modal

Título

×

Bem -vindo ao Linuxhint!

Cancelar
Salvar

Pode -se observar que nenhum modal está aparecendo:

Etapa 2: Abra a janela modal de bootstrap usando jQuery

Dentro do "”Tags, especifique o código jQuery, conforme implementado abaixo:

A seguir, a descrição do código jQuery acima mencionado:

• O "$ ()”É o atalho do método getElementById () e retorna o ID do elemento específico.
• ““.on ('clique')”É uma função que gera um evento de tempo de execução no clique. Por exemplo, descrevemos isso quando o botão com o ID “lançar-modal”É clicado, a função especificada será invocada.
• O "function ()" é usado para implementar funções em javascript. A função especificada levará o id “#WelComemodal”Da janela modal e associe -a ao jQuery“modal ('show')”Função
• O código acima mencionado significa que a função mostrará a janela modal no botão Clique:

Compilamos com sucesso o código jQuery para abrir a janela modal de bootstrap.

Conclusão

Para abrir uma janela modal de bootstrap usando jQuery, primeiro, escreva o código HTML para a janela modal. Depois disso, implemente as funções do jQuery. O jQuery “modal ('show')","modal ('hide')", e "modal ('alternância')”As funções são usadas para a caixa de diálogo da janela modal de bootstrap. Este artigo ilustrou o procedimento para lançar uma janela modal de bootstrap com jQuery.