Crear un Modal en Bootstrap

Crear un modal en Bootstrap

28/11/2016
Por Dani Clemente
21 comentarios

Os traemos un tutorial sobre desarrollo web donde explicamos cómo crear un modal en Bootstrap. Explicaremos qué es un modal y cómo crear una aplicación desde cero de una manera realmente sencilla. ¡Vamos allá!

¿Qué es un modal?

Seguro que, en algún proyecto, el cliente te ha sugerido mostrar un mensaje o cierta información al usuario que destaque respecto al contenido de la página. Ya sea cuando pulsamos un botón o automáticamente cuando el usuario lleve cierto tiempo en el artículo o página de la susodicha web. Esto nos da una idea de lo que conocemos por modal.

Es, por tanto, es una capa que se superpone a las demás quedando en primer plano de nuestra web y dejando en un segundo plano el resto de la página. Para que el usuario no capte la atención en otro componente que no sea el modal, se suele crear éste dentro de otra capa que ocupa el 100% del ancho y del alto de la ventana con un mínimo de opacidad y tono oscuro.

Qué es un modal
Ejemplo de modal

Hay mucha gente que confunde el concepto de modal con el de popup. Un popup es una ventana emergente que genera la página, es decir, que mientras el modal está en la misma ventana (o tab) de nuestro navegador, el popup generará otra ventana donde mostrará la información que requiera.

Cargando las librerías para el modal en Bootstrap

Ahora que tenemos un poco más claro el concepto de modal, vamos a ver cómo implementarlo en nuestra aplicación.

Lo primero que deberemos hacer es obtener las librerías que vamos a usar que son las siguientes:

  • jQuery
  • Bootstrap

A lo mejor te preguntas porqué tenemos que cargar la librería de jQuery si lo único que quieres es que funcione tu aplicación en Bootstrap. Muy sencillo, requiere jQuery y sin ésta no podría funcionar toda la parte de componentes javascript de la misma tales como transiciones, tooltips, popover o el propio modal que vamos a ver en este artículo.

Para cargar las librerías que acabamos de comentar, tenemos dos opciones:

La primera es que carguemos ambas (o una solamente) directamente desde cada una de sus páginas con el enlace que nos proporcionan. Recuerda que, si se cae alguna de estas páginas, nuestra aplicación dejará de funcionar aunque la probabilidad de que la página de Bootstrap o de jQuery estén caídas es casi remota. Si elegimos esta opción, estas serán las líneas que deberás pegar en tu código:

Como vemos, en primer lugar cargamos los estilos de bootstrap ya que sin ella no funcionaría no funcionaría el mismo. Tranquilos, luego los podéis modificar a vuestro antojo.

¡Importante! El archivo JS de jQuery ha de cargarse antes que el de Bootstrap así que os recomendamos que copiéis y peguéis las tres líneas en ese orden o al menos las dos últimas. Esto es por lo que comentamos previamente: si no tenemos cargado jQuery, Bootstrap no funcionaría.

El HTML del modal

Ahora que tenemos cargadas las librerías, tenemos que crear el código HTML que hará que funcionen las funciones que nos ofrecen ambas.

En primer lugar, vamos a crear el modal en sí. Para que sea más fácil de explicar, dejamos aquí el código y, seguidamente, explicaremos línea a línea:

Línea 1: creamos el contenedor principal con un ID único (en nuestro caso “miModal”). Es importante quedarnos con este ID ya que será el que usemos a la hora de llamar a la función que muestra este contenedor. Es este el contenedor, que comentábamos antes, que tiene el fondo oscuro con cierta opacidad que hace que reste protagonismo al resto de la página.
Linea 2: es el contenedor donde está definido el tamaño del contenedor (por defecto 600px).
Línea 3: se trata de un contenedor donde están asociados estilos tales como fondo del modal, bordes, sombreados, etc.
Línea 4: en esta línea, Bootstrap mete el DIV que contiene el botón de cerrar el modal así como el título del modal en un encabezado (H4).
Línea 10: en el div con clase “modal-body” es donde insertaremos el contenido que queremos que haya en el modal.

Una vez que tenemos el modal creado y, por defecto, oculto, tenemos que elegir la manera de que se muestre al usuario. Para ello, vamos a usar un botón de los que viene predeterminados en la librería de Bootstrap.

Para ello, sólo tendremos que insertar el siguiente código donde queremos que aparezca dicho botón:

Como vemos, el atributo “data-target” es el encargado de contener el identificador del DIV del modal: miModal. Si cambiáramos uno u otro dejarían de funcionar. Tienen que tener el mismo ID obligatoriamente.

Podemos ver el funcionamiento del mismo, a continuación, pulsando sobre el botón “Abrir modal”:

Si quisieras que el modal se abriera, por ejemplo, al hacer clic sobre un enlace, sólo tendrías que insertarle los atributos data-tootle y data-target en la propia etiqueta A como puedes ver aquí:

¡Así de fácil! Esperamos que te haya servido de mucho el tutorial. Si tienes cualquier duda o has visto algún gazapo no dudes en comentarlo justo debajo 😉

Sobre el autor

Dani Clemente

Alcalaíno, como el autor del Quijote, con raíces zamoranas. Siempre con la sonrisa en la cara. Informático, que no friki, apasionado del desarrollo web, el SEO y el análisis de datos.

Comentarios

  1. Hola Dani!
    Enhorabuena por tu post!
    La verdad es que explicado y visto así, parece fácil. Pero tengo una duda: es posible tener en la misma página varios botones (o enlaces) que llamen a varios modal diferentes (cada botón llamaría a un modal) y además, con las mismas propiedades (mismo texto, color, etc)?
    En mi caso, quise hacer una galería de proyectos en los que al clickear en una miniatura mostrara el proyecto correspondiente, pero no hubo manera, lo dí por perdido!
    Sólo saberlo, por saber si hay esperanza 😀

    Muchas gracias!
    Un saludo!

    • Adrian Iborra 8 septiembre 2017

      Hola Lou.

      Muchas gracias!!

      Por supuesto que se podría insertar varios botones que abriesen distintos modales. Una forma sería duplicar el elemento con id=”miModal” tantas veces como quieras cambiando el id por el que quieras (el id siempre tiene que ser único) y una vez hecho esto duplicar los botones y cambiar el atributo “data-target” por los id de los modales duplicados anteriormente.

      El tema de la galería de proyectos es que probablemente una vez abierto el modal hubieses querido que apareciesen las flechas para no tener que ir abriendo y cerrando el modal y esa funcionalidad es el de una galería, no un modal. No tiene mucho más misterio ya que la galería lleva aparejada la funcionalidad de modal pero si que hay que controlar por medio de javascript cuantos elementos hay en la galería y cual es el que se está mostrando.

      Espero haberte ayudado.
      Un saludo!

  2. Jimmy Ruv 22 mayo 2017

    Bien, muy buen aporte… mi duda es la siguiente…
    Tengo el mismo ejemplo que se muestra anteriormente, pero… si entro directamente a la web… no me deja ejecutar el modal, hasta que en la linea de direcciones pongo un “#”.
    Por decir.. si tecleo .. http://www.mipagina.com y clickeo en el boton para abrir el modal, me pone primero un “?” y no me deja abrirlo hasta que yo mismamente coloco un “#”….
    Cabe resaltar que recibo una session… en el header del documento index.

    • Adrian Iborra 8 septiembre 2017

      Hola Jimmy,

      Tendríamos que ver con detenimiento. Cuando comentas que te aparece un número de sesión, ¿te refieres en la URL?
      ¿Tu página la tienes albergada dentro de algún gestor de contenido o servidor en el que tu mismo haces tu página web?

      Un saludo y gracias por comentar.

  3. Pilarbcn 27 julio 2017

    Muchas gracias Dani!! Me ha sido de mucha utilidad.
    Pilarbcn

  4. Tengo un problema con tu tutorial. La ventana modal se me va mucho a la derecha y parte de ella no se, como se puede solucionar?

    • Adrian Iborra 8 septiembre 2017

      Hola Alan.

      Lo primero gracias por tu pregunta.

      Por lo que comentas parece que hay algo en las reglas CSS que no se está interpretando bién. Revisa que el CSS sea el correcto.

      Un saludo!

  5. Miguel Angel 15 agosto 2017

    Buenas tardes
    una pequeña pregunta , como hago para dejarlo automatico , que cuando ingrese a la pagina cargue solo
    muchas gracias de antemano

    • Adrian Iborra 8 septiembre 2017

      Hola Miguel Ángel.

      Puedes insertar este código javascript en tu HTML para que aparezca al cargar tu página:

      Así cuando el objeto “window” se cargue en el navegador “load” ejecutará el “modal” y aparecerá.

      Un saludo y gracias por tu comentario.

  6. Hola, muy buena explicación!
    Ahora, cómo hago para que se ejecute automáticamente al cargar la página?

    Gracias!

    • Adrian Iborra 8 septiembre 2017

      Hola Camilo.

      Para hacer lo que pretendes tendrías que insertar este código javascript en tu HTML.

      Así conseguirías que cuando el objeto “window” se cargue en el navegador “load” ejecute el “modal”.

      Un saludo y gracias por comentar!

  7. Solangela Martínez 11 septiembre 2017

    Excelente….
    Estaba buscando el código para el modal para un prototipo que estoy haciendo en HTML….
    Me sirvió a la perfección…. Graciasssss

  8. Hola Dani.
    Muy buen aporte.
    Mi inquietud es como hago para que el Texto del modal sea dinamico.

    Texto del modal

    Yo reemplaze la linea texto modal por y funciona bien

    pero necesito que el archivo.txt sea variable. es decir archivo1.txt o archivo2.txt y no lo he logrado.
    Me puedes indicar como hacerlo o como es la sintasis por favor
    Saludos y gracias

    • Adrián Iborra 20 septiembre 2017

      Hola Nicolas,

      Perdona, pero no consigo entenderte.
      ¿Dinámico en qué sentido?¿Estás intentando cargar texto desde varios archivos .txt?

      Un saludo y gracias por comentar

  9. Muy bueno el aporte, pero quisiera añadir un formulario completo dentro de la ventana modal, porfa, como lo puedo hacer?

    • Adrian Iborra 20 septiembre 2017

      Hola Kat,

      En realidad sólo tendrías que incluir el formulario HTML dentro del ‘

  10. Hola!
    De primeras enhorabuena por el código y muchas gracias por compartirlo pero cuando intento poner varios modales no me funciona aunque cambie el target y el id. Te pongo mi página para que veas lo que ocurre o más bien lo que no ocurre, lo tengo puesto en la sección GWO y OTRAS FORMACIONES en el primero no funciona, en el segundo si.
    #
    Gracias

  11. Hola de nuevo, lo que no sé es cómo hacer que el tamaño de la ventana modal se adapte al texto a lo ancho ya qu tengo frases largas y las corta y queda mal al ser una lista.
    Gracias

  12. cuando reduces la ventana para móvil el aspa de cerrar se mueve no se mantiene a la derecha

    • Adrian Iborra 20 septiembre 2017

      Hola Violeta,

      Nosotros vemos el modal bien. No se cortan las frases.
      Por otro lado es normal que el aspa de cerrar se centre ya que es un comportamiento por defecto de Bootstrap que ayuda a que sea más visible la forma de cerrar el modal en móvil.

      Un saludo y gracias por escribir.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *