Los modales en bootstrap 4 , también llamados lightboxs o cuadros de dialogo son usados para mostrar información adicional a la que hay en la pantalla principal de la web.

En muchas ocasiones tienen mensajes de confirmación como cuando se va a eliminar un registro, abren imágenes en mayor tamaño, pueden tener formularios de contacto (aunque esto puede restar usabilidad a la web) y muchos más usos.

Por estas razones los modales en bootstrap 4 son tan importantes,y es por ello que vamos a ver en esta entrada como funcionan.

Los modales necesitan tener una llamada a la acción que los invoque, generalmente desde el cuerpo principal de la página, para lo que vamos a introducir un botón, aunque en realidad puede ser cualquier tipo de elemento mientra tenga los atributos necesarios, yo generalmente uso enlaces, pero para este ejemplo sencillo nos puede valer el botón..

Este botón tiene dos atributos importantes:

• data-toggle=»modal»: que determina que se trata de un modal
• data-target=»#modal_prueba»: que le dice a bootstrap que tiene abrir el modal con esa id

<!--boton-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_prueba">Abrir modal</button>

Ahora ya podemos proceder a crear el modal en si mismo:

<!--modal-->
<div class="modal fade" id="modal_prueba">
	<div class="modal-dialog">
		<div class="modal-content">
			<!--header-->
			<div class="modal-header">
				<h4 class="modal-title">Título del modal</h4>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<!--body-->
			<div class="modal-body">
				Contenido que queramos...
			</div>
			<!--footer-->
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar modal</button>
			</div>
		</div>
	</div>
</div>

Cómo podemos ver se trata de un contenido muy sencillo;

• Un div que informa a bootstrap que se trata de un modal, con una animación para aparecer (fade) y con la id a la que apunta nuestro botón
• Después hay otro div con la clase modal-dialog que envuelve a otro div donde se introduce el contenido propiamente dicho.

Hasta aquí todo es «obligatorio» y ahora es cuando podemos empezar a modificar, añadir o eliminar elementos en nuestros modales.

De hecho un modal bien formado tendría como vemos en nuestro ejemplo tres partes; header, body y footer.

modal-header

En el header vemos que podemos introducir un título por medio de la clase moda-title y un botón para cerrar el modal que debe de tener la clase close y el atributo data-dismiss=»modal»

modal-body

En el body podemos introducir todo lo que queramos y necesitemos, desde solo texto a una organización compleja con filas y columnas, o incluso tablas, no hay límite a lo que podamos necesitar.

modal-footer

Aquí vamos a poner un botón para cerrar el modal del mismo modo que en el header pero por medio de un boton en lugar de con una X.

Cómo podemos ver los modales en bootstrap 4 son muy sencillos de utilizar y nos pueden dar una gran cantidad de opciones a la hora de usabilidad, de mostrar información, interacciones con el usuario…