GRUPO DE TRABAJO: (Nº3)
-Karen Villamizar.
-María García.
-Daniel Camacho.
-Nicolas Toledo.
-Silvia Gonzalez.
En la segunda hora socializamos las dudas con el docente acerca de las publicaciones en la pagina web y explico estas.
Bootstrap jQuery Modal
Las ventanas modales de Twitter Bootstrap se crean usando un plugin de jQuery personalizado. Se puede usar para crear ventanas modales para enriquecer la experiencia del usuario o para añadir funcionalidad a los usuarios.
En este artículo vamos a explicar como disponer de ventanas modales de Twitter Bootstrap Modals.
En nuestro <head> deberemos añadir los estilos de Bootstrap.
<link href="bootstrap.css" rel="stylesheet">
La ventana ya presenta una visualización bastante buena pero podemos cambiarla editando la hoja de estilos.
En nuestro <body> necesitaremos crear un link que abrirá la ventana:
<a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Abrir ventana modal</a>
Ahora tendremos justo debajo el código que representa la ventana en display:none.
<div id="example" class="modal hide fade in" style="display: none;"> <div class="modal-header"> <a data-dismiss="modal" class="close">×</a> <h3>Cabecera de la ventana</h3> </div> <div class="modal-body"> <h4>Texto de la ventana</h4> <p>Mas texto en la ventana.</p> </div> <div class="modal-footer"> <a href="index.html" class="btn btn-success">Guardar</a> <a href="#" data-dismiss="modal" class="btn">Cerrar</a> </div> </div>
Y finalmente solo faltará incluir los scripts antes de la etiqueta de cierre </body>:
<script src="jquery.js"></script> <script src="bootstrap-modal.js"></script>
TOMADO DE: https://www.jose-aguilar.com/blog/bootstrap-modal/
No hay comentarios.:
Publicar un comentario