O uso de janelas pop-up para exibir mensagens curtas na página da web está ok, embora não seja tão amigável. No entanto, os pop-ups não têm poder com informações longas, como os Termos de Serviço do Site. Isso requer o uso de algo chamado Modal Box Modal e incorporando uma caixa de texto de várias linhas textarea na caixa modal.
Essa coisa é muito difícil de escrever o código JavaScript manualmente, mas é mais fácil escrever com bootstrap.
1. Objetivos básicos
Há uma página da web com um hiperlink e um botão:
Clicar neles abrirá uma caixa modal, como mostrado abaixo. Esta caixa modal, clicando no botão X no canto superior direito e a confirmação abaixo será fechada.
2. Processo de produção
1. Como você precisa usar o Bootstrap, você pode baixar os componentes no site oficial (clique para abrir o link). A versão de bootstrap usada no ambiente de produção (clique para abrir o link). O Bootstrap3 não é compatível com 2. É recomendável usar o Bootstrap3 diretamente de acordo com seus documentos de desenvolvimento. Este artigo também é feito com base no bootstrap3. Ao mesmo tempo, o efeito JavaScript fornecido pelo Bootstrap3 precisa ser suportado pelo JQuery1.11 (clique para abrir o link). Você pode baixar o JQuery1.11 (clique para abrir o link) compatível com o navegador antigo IE6 (clique para abrir o link) no site oficial do jQuery, em vez de jQuery2 (clique para abrir o link) no navegador antigo IE6. Após o download, configure o diretório do site. Decompressa Bootstrap3 diretamente para o diretório do site e coloque JQuery-1.11.1.js no diretório JS, ou seja, o mesmo diretório que o bootstrap.js. A estrutura da pasta do site é aproximadamente a seguinte:
2. O código desta página da web é o seguinte e os seguintes fragmentos são analisados:
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> content = "width = dispositivo de dispositivo, escala inicial = 1,0, scalable = no"> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src = "js/jQuery-1.1.1.js" src = "js/bootstrap.js"> </script> </head> <body> <p> <a data-toggle = "modal" data-target = "#mymodal"> contrato de serviço </a> </p> <p> <butt type = "button" toggle = "modal" data-target = "#" #MOModal "MyModal" Tipo "Button" Data-toggle = "Modal" Data-target = "# id = "mymodal" role = "diálogo"> <div> <div> <div> <botão type = "button" data-dismiss = "modal"> <pan> × </span> </button> <h4 id = "myModAllabel"> contrato de serviço </h4> <div> <divon> <p align = "center"> <textarea "> efeito. Os termos de serviço deste Contrato têm efeito legal. Os termos de serviço deste Contrato têm efeito legal. Os termos de serviço deste Contrato têm efeito legal. </sexttarea> </p> </div> <div> <p align = "center"> <botão type = "button" data-dismiss = "modal"> ok </but uma button> </p> </div> </div> </div> </div> </div> </body </html>
(1) <head> parte
<! Content = "Width = Device-Width, Scale Initial = 1,0, Scalable = Não"> <!-Este exemplo requer suporte de três plug-ins externos-> <link href = "css/bootstrap.css" Rel = "StyleSheet" Media = "Screen> <script =" Text/Javascript "Sr = Srescr =" Sres "JavScr =" Media "Ja/" Screen> <script = "Text/javascript" sr = "Sres" Src = "" JavScript "SRC =" Screen> <script = "Text/javascript" sr = "Sres" Src = "" JavScr = "Sres (" Scretery-Tert = "111) <script type = "text/javascript" src = "js/bootstrap.js"> </script> </ad Head>(2) Links e botões apresentados originalmente na página da web
<p> <!-data-toggle = "modal" data-alget = "#mymodal" requer a caixa modal aberta de mymodal-> <a data-toggle = "modal" data-target = "#mymodal"> contrato de serviço </a> </p> <p> <!-class = "btn btn-danger" é o estilizador de estilos </a> </p> <p> <! -> <button type = "button" data-toggle = "modal" data-target = "#mymodal"> clique aqui para ler o contrato de serviço </botão> </p>
(3) parte da caixa modal
O básico das caixas modais são as seguintes:
Portanto, o seguinte código é encontrado:
<!-class = "Modal Fade" exige que a caixa modal seja aberta com um efeito de animação Fade, class = "modal" também está ok, mas é aberto muito abruptamente. id = "myModal" ecoa o hiperlink e o botão acima-> <div id = "myModal" role = "diálogo"> <div> <!-O layout da caixa modal deve ser executado após o conteúdo modal. -> <div> <div> <!-Esta é a parte do título da caixa modal, com um semicolon de × e o caractere de transferência com ×, que é essencialmente um botão de fechamento-> <button tipo = "Button" Data-Dismiss = "Modal"> <n4 × </span> </button> <!-isto é o título da caixa modal-> <h4 idh4 × </span> </! <div> <!-Esta é a parte principal da caixa modal, que é incorporada a uma caixa de texto somente leitura com várias linhas de 3. A caixa de texto é centrada na parte principal da caixa modal. Está tudo bem sem uma caixa de texto, mas o conteúdo será apresentado ao usuário ao mesmo tempo. Então, por que não apenas aparecer a janela? -> <p align = "Center"> <textário linhas = 3 readonly = "true" /> Os termos de serviço deste Contrato são legalmente eficazes. Os termos de serviço deste Contrato têm efeito legal. Os termos de serviço deste Contrato têm efeito legal. Os termos de serviço deste Contrato têm efeito legal. </sexttarea> </p> </div> <div> <!-Esta é a cauda da caixa modal, e um botão OK centrado é colocado-> <p align = "Center"> <botão tipo = "Button" Data-Dismiss = "Modal"> ok </botão> </p> </div> </div> </div> <////////Divis>
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 é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.