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

quieres ver arbol
Viernes, 22 Septiembre 2017 15: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



Todoaunclic
¿Aún no estás en Todoaunclic?
Empresas, Microempresas, Pymes y Autónomos
Anuncia GRATIS los Productos y Servicios de tu Empresa

banner-diseño-web


 

Visto 7541 veces Modificado por última vez en Viernes, 22 Septiembre 2017 16:49

Artículos relacionados (por etiqueta)

  • Herramientas online para edición de fotos

    iLoveIMG Compress Image es una Herramienta online muy interesante para el tratamiento de tus fotos antes de subirlas a tu Página Web. Ya sabes que todas las fotos que se suban a una página web tienen que estar optimizadas, en tamaño y peso y con esta serie de herramientas online puedes hacerlo perfectamente.

  • Optimizar imágenes para una página web

    Las imágenes son uno de los elementos que más lastran la carga de una página web. De ahí que debamos ser cuidadosos en su procesamiento antes de subirlas.

  • I Congreso de la Mujer, Empleo, Emprendimiento y Microempresas

    Solución Individual colabora con AEMME, Asociación Española Multisectorial de Microempresas, diseñando la página web que se utilizará como página de aterrizaje de la campaña de Marketing Digital...

  • Diseño Web basado en Marketing Digital para PYMES

    El Diseño Web basado en Marketing Digital es el conjunto de diseño, creatividad, servicios, rentabilidad y análisis que busca un único objetivo, mejorar las ventas de tu empresa.

  • Integrar Font Awesome 5.0.6 en Joomla

    En este artículo veremos cómo se integra Font Awesome 5.0.6 en el CMS de Joomla para que podamos utilizar todos los iconos y efectos que podemos aplicar con esta tipografía.

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

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