Uma caixa modal (modal) é um formulário infantil que é sobreposto no formulário pai. Normalmente, o objetivo é exibir o conteúdo de uma fonte separada, que pode ter alguma interação sem deixar o formulário pai. O subformato pode fornecer informações, interação, etc.
Se você deseja fazer referência à funcionalidade do plug -in separadamente, é necessário fazer referência ao modal.js. Ou, como mencionado no capítulo Visão geral do plug -in Bootstrap, você pode consultar o bootstrap.js ou versões compactadas do bootstrap.min.js.
1. Uso
Você pode alternar o conteúdo oculto do plug -in modal da caixa (modal):
Através do atributo de dados: defina o atributo data-toggle = "modal" no elemento do controlador (como um botão ou link) e defina o Data-Target = "#Identifier" ou href = "#identificador" para especificar a caixa modal específica para alternar (com id = "identificador").
Com JavaScript: Usando esta técnica, você pode chamar uma caixa modal com id = "identificador" através de uma linha simples de javascript:
$ ('#identificador'). Modal (opções)
2. Exemplo simples
div id = "mymodal"> <div> <button type = "button" data-dismiss = "modal"> x </butut> <h3> título da caixa de discagem </h3> </div> <div> <p> Caixa de discagem Body </p> </div> Data-Dismiss = "Modal"> Confirmar </a> </div> </div>
A caixa de diálogo modal pode ser chamada diretamente usando um botão ou um link, e este é o uso simples:
Copie o código da seguinte forma: <a href = "#modal1" role = "botão" data-toggle = "modal"> add </a>
Além disso, quando você precisar deixar a caixa de diálogo limpar os dados do formulário toda vez que forem abertos, como segue:
A cópia do código é a seguinte: $ ('#modal1'). Modal ('hide');
$ ("#modal1"). on ("hidden", function () {$ ('#form1') [0] .reset ();}); // Depois de adicionar o contrato, limpe a operação do formulário
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.