Diseño Web y Marketing Digital

Hacemos accesible Internet a las Empresas

Teléfono Fijo 91 881 47 19

91 881 47 19

Horario de Atención
de L a V de 9:00 a 14:00
y de 17:00 a 19:00

hablamos de tu proyecto
Viernes, 22 Septiembre 2017 11:46

Crear Ventana Modal en Bootstrap

Escrito por 
Valora este artículo
(1 Voto)

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.

 

Comparte este Artículo en tus Redes Sociales



Guía de Microempresas
¿Aún no estás en la Guía de Microempresas?
¿Quieres saber si eres una Microempresa?
La Guía definitiva para encontrar lo que necesitas.
¡Date de Alta Gratuitamente!

banner-diseño-web


 

Visto 5670 veces Modificado por última vez en Viernes, 22 Septiembre 2017 12:49

Artículos relacionados (por etiqueta)

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.

¡Atención! Este sitio utiliza cookies.

Si no cambia la configuración de su navegador, usted acepta su uso. Saber más Acepto

logo cabecera web
EIE (Espacio de Iniciativas Empresariales)
Parque Empresarial La Garena
C/Blas Cabrera, 23
Alcalá de Henares - Madrid
Teléfono: 91 881 47 19
Mapa Localización 

sello ssl comodo 90

telefono web
Teléfono de atención al cliente: 91 881 47 19
de Lunes a Viernes de 9:00 a 14:00 y de 17:00 a 19:00

Consultoría de Internet | Diseño Web | Mapa del Sitio

Solución Individual ® y su Logotipo son
Nombre Comercial y Marca Registrada.
 © Reservados Derechos de Autor 2010 

Microempresa asociada a AEMME
logo AEMME P

Te puede interesar: Microempresas | Despachos Profesionales | PYMES

Servicios: Contratación de Dominios | Contratación de Certificados SSL | Hosting Web en España

Partners: InfodemiBoda.es | TODOAUNCLIC.es


acceso candado   social facebook   social google   social twitter   social flickr   social pixabay   social pinterest   social youtube   social guiamicroempresas 


 Los precios indicados en esta web NO incluyen el IVA

Somos un sitio de confianza y nos presentamos con total 

Transparencia y Legalidad.

Servicio de CalidadServicio de CompromisoServicio de Garantía

 

empresa colaboradora 180x90