Bootstrap jQuery ventana modal v1

modal1

Ventanas modales son cuadros de dialogo sobre información relevante  que el usuario debe confirmar antes de seguir adelante con algún proceso.

En la cabecera del documento HTML debemos hacer referencia a las librerías de Bootstrap (actualemente v3.3.6) y JQuery (v1.12.3) necesarias:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Modals</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $("#myModal").modal('show');
 });
</script>
</head>

En este primer ejemplo la ventana modal se mostrará cuando el documento este cargado usando la función JQuery ready, para eso habilitamos de forma manual la ventana modal usando JS, identificamos la ventana modal usando el #Id que le hemos asignado myModal (deber ser único) y la abrimos con el  método .modal(“show”).

Podemos a su vez realizar otras operaciones usando el mismo método por ejemplo para esconderla usando .modal(“hide”).

Para crear nuestra ventana modal abrimos una etiqueta div con los atributos #Id myModal y la clase necesaria modal (la clase .fade es opcional y permite crear un efecto de transición cuando se muestra y esconde la ventana) .


<div id="myModal" class="modal fade">

</div>

A continuación dentro de nuestra ventana modal creamos una nueva capa (HTML div) con la clase .modal-dialog. De forma opcional podemos controlar el tamaño de la ventana si usamos la clase .modal-sm (small) para ventanas pequeñas o .modal-lg (large) para una grande, por defecto si no lo especificamos se crearán con el tamaño medio.

<div id="myModal" class="modal fade">
<div class="modal-dialog">

</div>
</div>

Ahora ha llegado el momento de darle estilo a la ventana modal con la clase .modal-content en un nuevo contenedor div. Dentro definiremos nuevos contenedores para las 3 áreas de la ventana: La cabecera con .modal-header el cuerpo con .modal-body y el pie con botones .modal-footer.

El botón con <button> dentro de la cabecera permite definir un botón para cerrar la ventana:

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Confirmation</h4>
</div>

La clase .close la da estilo al botón para cerrar la ventana.

El contenedor con la clase .modal-body normalmente albergará texto, vídeos o cualquier otro contenido.

El último contenedor con la clase .modal-footer lo usaremos para posicionar los botones para cerrar la ventana o cualquier otra interacción del usuario.

 

Ejemplo completo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Modals</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $("#myModal").modal('show');
 });
</script>
</head>
<body>
<div id="myModal" class="modal fade">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 <h4 class="modal-title">Confirmation</h4>
 </div>
 <div class="modal-body">
 <p>Do you want to save changes you made to document before closing?</p>
 <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-primary">Save changes</button>
 </div>
 </div>
 </div>
</div>

<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>

<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>

</body>
</html> 

Ejemplo

Bootstrap modal v1

Abrir la ventana usando atributos data-* desde cualquier etiqueta (trigger)

Podemos abrir la ventana desde un enlace, botón o cualquier otro elemento HTML cuando pinchamos sobre el, lo normal es usar un enlace o un botón pero puede ser incluso un texto o un párrafo.

<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>

//jsfiddle.net/popu/w07u4vu6/embed/html,result/dark/

Enlaces y recursos

Anuncios

2 pensamientos en “Bootstrap jQuery ventana modal v1

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s