logotipo-solucion-individual-nueva-era-400-blanco

Crear Ventana Modal en Bootstrap

Índice de Contenido

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

Loading

avatar solind
Antonio Fernández
Apasionado por la creación de experiencias digitales. Mi objetivo es potenciar la presencia en Internet de Empresas y Marcas, mejorando su visibilidad en el mundo digital. [CEO de Solución Individual®] [SEO] [WordPress Expert]
Comparte en tus Redes Sociales:
¿Quieres Hacer una Factura en PDF sin complicarte con un programa de contabilidad?
redes sociales logo hacer facturaQuiero Verlo
¿Necesitas Textos Legales para tu Página Web o Tienda Online?
logo imasitioplus Textos Legales

Adapta fácilmente los Textos Legales para que tu Página Web cumpla con la LOPD (Ley Orgánica de protección de Datos), RGPD, LOPDGDD y LSSICE

Quiero Verlo
¿Necesitas Hosting para WordPress?
PULSA AQUÍ
banner-viajetravel-350px
foto-whatsApp

Cristina

Consultora Soluciones Digitales

26/11/2024

¿En qué puedo ayudarte?

Soy Cristina 😀 consultora de Solución Individual. Para iniciar Chat PULSA AQUÍ

18:03 ✔

¿Te interesa un Hosting Específico para WordPress?

✅ Obtén un Hosting Profesional de alta calidad para WordPress sin sacrificar tu bolsillo. Pulsa Aquí para ver más Info

18:03 ✔