Crear un Modal en Bootstrap

Crear un modal en Bootstrap

28/11/2016
Por Dani Clemente
0 comentarios

Os traemos un tutorial donde explicamos cómo crear un modal en Bootstrap. Explicaremos lo que 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

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.

Deja un comentario

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