Las ventanas Modal en Bootstrap, son unas capas ocultas DIV en el código de la web que contienen la información a mostrar cuando las hacemos visibles mediante un enlace o botón.
Este tipo de ventanas no hay que confundirlas con las ventanas conocidas como PopUp, que estas abren una página web emergente en una ventana del navegador. Las ventanas Modal de Bootstrap se abren dentro del mismo entorno de la web, ya que su código está definido dentro de la misma web que lo contiene, y lo único que hacemos es que sea visible e invisible mediante enlaces o botones.
A continuación os muestro un ejemplo de cómo poner una ventana modal, partiendo de la base de que tenéis instalado en el proyecto las librerias necesarias de Bootstrap 3 incluyendo jQuery, esto es muy importante para que funcione correctamente. Como veréis, en este ejemplo lo que hacemos es abrir una ventana Modal que mostraría información sobre un Aviso Legal al pulsar en el enlace «Leer Aviso Legal»
Código para crear la ventana Modal con estructura de Cabecera, Cuerpo y Pie:
<div role=»dialog» tabindex=»-1″ class=»modal fade» id=»modal-avisolegal» style=»max-width:600px;margin-right:auto;margin-left:auto;»>
<div class=»modal-dialog» role=»document»>
<div class=»modal-content»>
<div class=»modal-header»> <!– CABECERA –>
<button type=»button» class=»close» data-dismiss=»modal» aria-label=»Close»><span aria-hidden=»true»>×</span></button>
<h4 class=»text-center modal-title»>Aviso Legal</h4>
</div>
<div class=»modal-body»> <!– CUERPO DEL MENSAJE –>
<p>TEXTO A MOSTRAR</p>
</div>
<div class=»modal-footer»> <!– PIE –>
<button class=»btn btn-default btn btn-primary btn-lg» type=»button» data-dismiss=»modal»>Cerrar </button>
</div>
</div>
</div>
</div>
Lo más importante del código para la ventana Modal, es que el DIV principal de la ventana tenga un ID. En nuestro ejemplo lo hemos llamado «modal-avisolegal»
Por defecto, en bootstrap, este tipo de ventanas Modal permanecen ocultas cuando se viasuliza la página en un navegador. Ahora veremos cómo hacer que un link abra nuestra ventana modal. Para ello escribiremos el siguiente enlace:
<a href="#" data-toggle="modal" data-target="#modal-avisolegal">Leer Aviso Legal </a>
Como podéis ver, es un enlace normal y corriente pero que tiene, además, los atributos «data-toggle» y «data-target», este último es el más importante, porque le asignaremos el valor del nombre que le dimos al ID del DIV principal de la ventana Modal, que en este caso es «#modal-avisolegal» y no olvidemos poner el símbolo de la «#» antes del nombre.
Solución Individual
