Componentes de Bootstrap

Diálogos modales

Un diálogo que toma el foco de la página para pedir una decisión o un formulario corto.

Un diálogo modal interrumpe a propósito: pide algo que el usuario debe responder antes de seguir, como una confirmación o un formulario corto. Resérvalo para eso.

Cuándo usarlo

Úsalo

Un título claro que diga qué se pide, y botones con el nombre de su acción («Eliminar», no «Aceptar»).
La acción principal a la derecha, cancelar a su lado; peligro para lo que elimina.
Mantenerlo corto; un formulario largo merece su propia página.
Cerrar con Escape, con el botón de cierre y con Cancelar.

No

Abrir un diálogo desde otro diálogo.
Usarlo para información que no necesita respuesta; usa una alerta.
Abrir uno sin que el usuario lo pida.

Anatomía

Un diálogo (modal-dialog) sobre una página atenuada, con un encabezado (título y cierre), un cuerpo y un pie con las acciones. Tamaños: pequeño, normal, grande y extra grande.

Variantes y estados

Formulario

Un título que dice qué se pide, los campos y las acciones al pie: la principal a la derecha, cancelar como enlace a su lado.

Formulario

Confirmación

Para lo que elimina o no se puede deshacer. Una baldosa con el icono de peligro, un título que es una pregunta y un botón con el nombre de su acción.

Confirmación

Resultado

Cuando algo terminó, un diálogo que lo dice y ofrece el siguiente paso.

Resultado

Con desplazamiento

Cuando el contenido es más largo que el diálogo, el cuerpo se desplaza y el encabezado y el pie se quedan en su sitio.

Con desplazamiento

Por pasos

Un asistente en un diálogo: el progreso de los pasos arriba, las opciones, y Atrás a la izquierda con Cancelar y Siguiente a la derecha.

Por pasos

Combinaciones

Combinación	Para qué usarla
Tamaño × contenido	Pequeño (`modal-sm`) para una pregunta, normal para un formulario, grande (`modal-lg`) para una lista o una vista previa, extra grande (`modal-xl`) para una tabla.
Baldosa de icono × significado	Peligro para lo que elimina, éxito para un resultado, información para un aviso; sin baldosa para un formulario simple.
Con desplazamiento × contenido largo	Para términos y listas; nunca para un formulario largo, que es una página.
Pasos × flujo	Una barra de progreso de pasos y Atrás / Cancelar / Siguiente en el pie; no más de tres pasos.
Centrado × corto	Centrado verticalmente (`modal-dialog-centered`) para una pregunta corta; arriba para un formulario que puede crecer.

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
Radio grande, una sombra suave y profunda, sin líneas entre encabezado, cuerpo y pie	El diálogo es una superficie que flota; las líneas lo partirían en tres cajas.
Cancelar es un enlace y la acción principal va rellena	Hay una sola cosa que pulsar; salir es fácil pero nunca compite con ella.
El título es una pregunta o un verbo y el botón lo repite	«¿Eliminar el curso?» / «Eliminar»: el usuario sabe qué va a pasar sin leer el cuerpo.
La baldosa de icono marca el tono antes del texto	Una baldosa roja pide cuidado antes de leer una palabra.

Clases

Clase	Qué hace
`modal`, `modal-dialog`, `modal-content`	Las capas de un diálogo
`modal-header`, `modal-title`, `modal-body`, `modal-footer`	Sus partes
`modal-sm`, `modal-lg`, `modal-xl`	Tamaños
`btn-closeclose`	Botón de cierre
`dd-modal-static`	Muestra un diálogo en la página en vez de sobre ella, para los ejemplos (Didactika)
`modal-footer-split`	Atrás a la izquierda, las acciones a la derecha (Didactika)

En esta versión

Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable.

Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos.

Accesibilidad

role="dialog" (o alertdialog para una confirmación) con aria-labelledby apuntando al título.
El foco entra en el diálogo al abrirse, se queda dentro mientras está abierto y vuelve al disparador al cerrarse.
Escape lo cierra; la página de detrás no es alcanzable.