Anteriormente, explicamos o uso da guia Bootstrap. Hoje, aprenderemos sobre o uso de janelas pop-up modelo no bootstrap.
Efeito:
Código:
<entrada de entrada = "btntext" type = "button" value = "Adicione componente de texto" data-toggle = "modal" data-alget = "#mymodal" href = "../ sysmanage/zujianManage.aspx"/> <!-modal-> <div Id = "mymodal" TABINDEX = 1 "REMING = <! Data-Dismiss = "Modal"> × </botão> <h3 id = "mymodallabel"> cabeçalho modal </h3> </div> <div> </div>
É muito simples, é tudo.
Nota: A propriedade de alvo de dados aponta para o ID do modelo, então clique no botão e o modelo será exibido.
Claro que você também pode usar o JS para controlá -lo.
O seguinte código:
Mostrar: $ ('#myModal'). Modal ('show');
Ocultar: $ ('#mymodal'). Modal ('hide');
Switch: $ ('#myModal'). Modal ('Toogle');
Evento: $ ('#myModal'). On ('Hidden', function () {// faça algo…});
Nota: usei o atributo href aqui, que é deixar o modelo remoto um URL. Obviamente, você pode escrever o que deseja diretamente no modelo modelo.
Se você olhar cuidadosamente para a estrutura DIV do modelo, entenderá que o modelo de modelo representa o conteúdo e o cabeçalho do modelo é o cabeçalho. Portanto, se você deseja adicionar dois botões na parte inferior, precisará usar o código a seguir.
<div> <a href = "#"> feche </a> <a href = "#"> salvar </a> </div>
Nota: Se você deseja definir a largura do modelo, adicione o layout. É colocar o modelo no bloco de código abaixo e definir a largura do modelo. style = "Largura: 500px". A propósito, você não pode simplesmente colocá -lo na classe usando o estilo de extensão. .
<div> </div>
O exposto acima é o uso da caixa pop-up do modelo de bootstrap apresentada pelo editor. Espero que seja útil para todos!