Nesta lição, aprenderemos principalmente sobre o plug-in modal da caixa no Bootstrap, que é um plug-in de função pop-up muito comum para sites interativos.
Para obter mais informações sobre o plug-in da Bootstrap Modal Box, clique no tópico especial "Tutorial de uso modal de bootstrap" para aprender. Espero que gostem, então continue abaixo
um. Uso básico
Componentes pop-up usando caixas modais requerem três camadas de elementos de contêiner de div, ou seja, modal (camada de declaração modal),
diálogo (camada de declaração de janela), conteúdo (camada de conteúdo). Na camada de conteúdo, existem três camadas, ou seja, cabeçalho, corpo e rodapé.
// Exemplo básico
Declaração modal, Mostrar indica exibição-> <div tabindex = "-1"> <!-Declaração de janela-> <div> <!-Declaração de conteúdo-> <div> <!-cabeçalho-> <div> <butter type = "Button" Data-Dismiss = "Modal"> <span> </span> </<butão> <h4> Membro "> <h4> Membro"> <h4> Membro "> <h4> <h4> MULTINM = MEMMISS = MEMMISS = HIMMISS = </span> <//</<h4> <h4> O membro não pode fazer login no membro temporariamente </p> </div> <!-nota de rodapé-> <div> <button type = "button"> registrar </button> <button type = "button"> efetuar login </button> </div> </div> </div> </div> </div> </div> </div> </div>
Se você deseja que a caixa modal seja automaticamente oculta e, em seguida, apareça clicando no botão, você precisa fazer as seguintes operações.
//Remove the show in the modal box and add an id<div id="myModal">//Click to trigger the modal box to display <button data-toggle="modal" data-target="#myModal"> Click pop-up window</button>//There are three sizes of pop-up windows, which are normal by default, and there are lg (large) and sm (small)<div><div>//The fading effect can be set<div id="myModal">//Use fluid in the grid system in the main body part<!-- Main body--><div> <div> <div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> </div> </div> </div> </div> </div> </div> </div> </div>
dois. Instruções de uso
Após a introdução do uso básico, vamos dar uma olhada nos vários usos importantes do plug-in. Todos os plug-ins são baseados em JavaScript/JQuery. Depois, existem quatro elementos: uso, parâmetros, métodos e eventos.
1. Uso
O primeiro tipo: pode ser passado através do atributo de dados
// data-toggledata-toggle = "modal" data-target = "#mymodal"
Data-Toggle indica o tipo de gatilho
O alvo de dados indica o nó acionado
Se você não estiver usando <butter>, mas <a>, onde o alvo de dados também pode usar href = "#mymodal"
substituir. Obviamente, recomendamos o uso do alvo de dados. Além dos dois atributos declarados, Data-Toggle e Data-Target, existem algumas opções disponíveis.
2. Parâmetros
Os efeitos podem ser controlados definindo a declaração de atributo de dados no elemento HTML.
// Fundo branco e clique em não fechar o data-backdrop = "false" // pressione ESC para não fechar o Data-Keyboard = "false" // Inicialize oculto. Se o clique do botão for acionado, o primeiro clique não será exibido e a segunda vez que será exibida. Data-Show = "false" // Load Index.html uma vez no contêiner href = "index.html"
Obviamente, ele também pode ser definido diretamente no JavaScript.
// Declare $ ('#myModal') através do jQuery.modal ({show: true, cenário: false, teclado: false, remoto: 'index.html',});3. Método
Se as janelas pop-up não forem exibidas por padrão, como posso clicar nas janelas pop-up antes e depois?
// Clique para exibir a janela pop-up $ ('#btn').4. Eventos
A caixa modal suporta 4 tipos de tempo, correspondendo a antes do pop-up, após o pop-up, antes de fechar e depois de fechar.
$ ('#myModal'). exibido! ');}); $ ('#mymodal '). exibido! ');}); $ ('#myModal ').Esta série de tutoriais foi compilada em: Bootstrap Basic Tutorials Tópicos Especiais, bem -vindo ao clicar para aprender.
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.