El uso de ventanas emergentes para mostrar mensajes cortos en la página web está bien, aunque no es tan amigable. Sin embargo, las ventanas emergentes son impotentes con información larga como los términos de servicio del sitio web. Esto requiere usar algo llamado Modal Box Modal e incrustar un cuadro de texto de múltiples líneas TextARea en el cuadro modal.
Esta cosa es demasiado difícil de escribir el código JavaScript manualmente, pero es más fácil escribir con Bootstrap.
1. Objetivos básicos
Hay una página web con un hipervínculo y un botón:
Haga clic en ellos abrirá un cuadro modal como se muestra a continuación. Este cuadro modal, haciendo clic en el botón X en la esquina superior derecha y la confirmación a continuación se cerrará.
2. Proceso de producción
1. Debido a que necesita usar Bootstrap, puede descargar los componentes en el sitio web oficial (haga clic para abrir el enlace). La versión Bootstrap utilizada en el entorno de producción (haga clic para abrir el enlace). Bootstrap3 no es compatible con 2. Se recomienda usar Bootstrap3 directamente de acuerdo con sus documentos de desarrollo. Este artículo también se realiza en base a Bootstrap3. Al mismo tiempo, el efecto JavaScript proporcionado por Bootstrap3 debe ser compatible con JQuery1.11 (haga clic para abrir el enlace). Puede descargar jQuery1.11 (haga clic para abrir el enlace) compatible con el antiguo navegador IE6 (haga clic para abrir el enlace) desde el sitio web oficial de jQuery, en lugar de jQuery2 (haga clic para abrir el enlace) en el navegador antiguo IE6. Después de descargar, configure el directorio del sitio. Descomprima Bootstrap3 directamente al directorio del sitio y coloque jQuery-1.11.1.js en el directorio JS, es decir, el mismo directorio que Bootstrap.js. La estructura de la carpeta del sitio es aproximadamente la siguiente:
2. El código de esta página web es el siguiente, y se analizan los siguientes fragmentos:
< xmlns = "http://www.w3.org/1999/xhtml"> <toad> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Box modal </title> <meta name = "Viewport" content = "width = dispositivo-width, inicial-escala = 1.0, user-scalable = no"> <link href = "css/bootstrap.css" rel = "stylesheet" medios = "pantalla"> <script type = "text/javaScript" src = "js/jQuery-1.11.1.1.js"> </script> <script type = "text/javaScript" src = "js/bootstrap.js"> </script> </head> <body> <p> <a data-toggle = "modal" data-target = "#mymodal"> Acuerdo de servicio </a> </p> <p> <button type = "botón" data-toggle = "modal"-target = "#mymodal" id = "mymodal" role = "diálogo"> <div> <div> <div> <button type = "button" data-dismiss = "modal"> <span> × </span> </boton> <h4 id = "mymodallabel"> Acuerdo de servicio </h4> </div> <div> <p align = "centro"> <sxtarea efecto. Los términos de servicio de este Acuerdo tienen efecto legal. Los términos de servicio de este Acuerdo tienen efecto legal. Los términos de servicio de este Acuerdo tienen efecto legal. </textarea> </p> </div> <div> <p align = "center"> <button type = "button" data-dismiss = "modal"> ok </boton> </p> </div> </div> </div> </div> </div> </body> </html>
(1) <Head> Parte
<Head> <!-Page Coding-> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Modal Box </title> <!-Requiere esta página web para adaptarse automáticamente a la pantalla de PC, tableta, teléfono móvil y otros dispositivos-> <meta name = "Viewport" content = "width = dispositivo-width, inicial-scale = 1.0, user-scalable = no"> <!-Este ejemplo requiere soporte de tres complementos externos-> <link href = "css/bootstrap.css" rel = "stylesheet" medios = "pantalla"> <script type = "text/javaScript" src = "js/jQueryer type = "text/javaScript" src = "js/bootstrap.js"> </script> </head>
(2) Enlaces y botones presentados originalmente en la página web
<p> <!-data-toggle = "modal" data-target = "#mymodal" requiere el cuadro modal abierto de myModal-> <a data-toggle = "modal" data-target = "#mymodal"> Acuerdo de servicio </a> </p> <p> <!-class = "BTN BTN BTN-Danger" es el estilo del botón en Bootstrap. -> <button type = "Button" data-toggle = "modal" data-target = "#mymodal"> Haga clic aquí para leer el acuerdo de servicio </boton> </p>
(3) parte de la caja modal
Los conceptos básicos de las cajas modales son los siguientes:
Por lo tanto, se encuentra el siguiente código:
<!-class = "modal fade" requiere que el cuadro modal se abra con un efecto de animación Fade, class = "modal" también está bien, pero se abre muy abruptamente. id = "mymodal" se hace eco del hipervínculo y el botón de arriba-> <div id = "mymodal" role = "diálogo"> <div> <!-El diseño del cuadro modal debe realizarse después del contenido modal. -> <div> <div> <!-Esta es la parte del título del cuadro modal, con un semicolon de × y el carácter de transferencia con ×, que es esencialmente un botón de cierre-> <button type = "botón" data-dismiss = "modal"> <span> × </span> </botte> <! <Viv> <!-Esta es la parte principal del cuadro modal, que está incrustado con un cuadro de texto de solo lectura con varias líneas de 3. El cuadro de texto está centrado en la parte principal del cuadro modal. Está bien sin un cuadro de texto, pero el contenido se presentará al usuario al mismo tiempo. Entonces, ¿por qué no aparecer por la ventana? -> <p align = "Center"> <TextArea Rows = 3 ReadOnly = "True" /> Los términos de servicio de este Acuerdo son legalmente efectivos. Los términos de servicio de este Acuerdo tienen efecto legal. Los términos de servicio de este Acuerdo tienen efecto legal. Los términos de servicio de este Acuerdo tienen efecto legal. </textarea> </p> </div> <div> <!-Esta es la cola del cuadro modal, y se coloca un botón de OK centrado-> <p align = "Center"> <button type = "botón" data-dismiss = "modal"> ok </button> </p> </div> </div> </div> </div> </div> </div>
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.