Agencia Creativa de Diseño Web

Hacemos accesible Internet a las Empresas

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

Crear Ventana Modal en Bootstrap Destacado

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


Busco Hosting
¿Estás buscando Hosting para tu Web?
No Busques más, ya lo has encontrado
Hosting para WordPress, Joomla, OpenCart, Bootstrap.
¡Mira nuestros Pack!

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 274 veces Modificado por última vez en Viernes, 22 Septiembre 2017 12:49

Artículos relacionados (por etiqueta)

  • Mejorar el diseño de mi página web

    Muchas veces se crea una página web y por cuestiones de trabajo y tiempo fundamentalmente, no entramos en ella en meses. Vivimos en un momento de constante cambio y por ello hay que estar pendientes de cómo nos mostramos en Internet. 

    Esto es muy importante ya que necesitamos saber si la información que muestra y su presentación es la que deseamos, en ese momento, para nuestra empresa. Construir un diseño creativo para presentar la web es fundamental en las pequeñas empresas, que requieren mayor impulso en Internet.

  • Validar Formulario en Bootstrap con Javascript

    Veremos cómo validar los campos de un formulario creado con Bootstrap y usando JavaScript y Jquery para la validación de los diferentes campos del formulario. Partimos de la base de que tenemos instalado Bootstrap 3.0 con Jquery para realizar este ejemplo.

  • Busco Hosting

    Hosting Web Compartido, personalizado y especializado para Empresas. Indicados para alojamiento de páginas Web diseñadas en WordPress, Joomla, Opencart o Bootstrap. Hosting Web en Madrid

  • Como aprender programación gracias a Mimo

    Tiempo atrás, lo más básico que debía saber una persona era leer y escribir. Eso y aritmética elemental. Luego vinieron las computadoras e Internet, y en la actualidad es obligatorio tener nociones mínimas de ofimática y de manejarse con la red de redes.

  • API Web de Viajes para Onlinetravel

    Onlinetravel es una empresa mayorista de viajes que ofrece sus servicios gratuitos a emprendedores y empresas ofreciendoles el mejor producto turístico a sus clientes y visitantes de su sitio web, y obteniendo comisiones por las ventas que realicen.

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.

Ellos Confian en Nosotros

¡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 

logo rapidSSL

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

Horario de Verano: del 15 de Junio al 15 de Septiembre
de Lunes a Viernes de 9:00 a 15: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

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


 Los precios indicados en esta web NO incluyen el IVA