Caja de luz vs. Modal
Una lightbox es una ventana modal hecha para fotos o videos. Un modal normal tiene una opción que elegir, un formulario o una tarea corta.
Usa una caja de luz para ampliar imágenes o videos. Usa un modal cuando el trabajo principal sea actuar o decidir.
Ver lo que hace cada patrón
Prueba cada ejemplo. Luego lea sobre el trabajo para el que fue hecho.
Caja de luz
Una lightbox abre un archivo multimedia en un visor más grande y oscurece la página a su alrededor.
<dialog>Seleccione una foto para abrir una vista a tamaño completo con un pie de foto. Tiene botones de Anterior, Siguiente y Cerrar.
- Úsalo cuando
- Úselo para observar de cerca los medios sin perder el lugar actual en la galería.
- No lo uses cuando
- Nunca lo uses para una tarea que requiera edición compleja o comparación lado a lado.
- Nombre usado en código
<dialog>
Diálogo modal
Un diálogo modal es una ventana enfocada. Bloquea la pantalla actual hasta que alguien la cierra o termina.
Para la eliminación de cuenta, el foco del teclado permanece dentro del cuadro de diálogo. Si la persona cancela, el enfoque vuelve al botón que lo abrió.
- Úsalo cuando
- Úsalo para una elección corta o tarea pequeña que debe recibir toda la atención.
- No lo uses cuando
- Nunca abras un diálogo encima de otro ni uses uno para información normal o de bajo riesgo.
- Nombre usado en código
<dialog> / role="dialog" aria-modal="true"
Comparación rápida
| Patrón de UI | Mejor para | No para | Nombre usado en código |
|---|---|---|---|
| Caja de luzLightbox | Úselo para observar de cerca los medios sin perder el lugar actual en la galería. | Nunca lo uses para una tarea que requiera edición compleja o comparación lado a lado. | <dialog> |
| Diálogo modalModal Dialog | Úsalo para una elección corta o tarea pequeña que debe recibir toda la atención. | Nunca abras un diálogo encima de otro ni uses uno para información normal o de bajo riesgo. | <dialog> / role="dialog" aria-modal="true" |
Antes de lanzarlo
- 01
Escribe lo que la persona necesita hacer.
- 02
Probar el teclado, enfoque, tacto, zoom, carga, estados vacíos y de error.
- 03
Asegurarse de que las personas puedan obtener la misma información sin pasar el cursor o movimiento.
- 04
Probar con contenido real en pantallas pequeñas y grandes.
Petición de comparación que puedes copiar
Copia esto cuando tu equipo necesite ayuda para elegir entre los patrones.
Elige el mejor patrón de Caja de luz (Lightbox), Diálogo modal (Modal Dialog) para nuestro flujo de usuario real. Usa esta regla: Una lightbox es una ventana modal hecha para fotos o videos. Un modal normal tiene una opción que elegir, un formulario o una tarea corta. Anota la tarea, la cantidad de contenido y el costo de detener el flujo. Comprueba el teclado, toque, carga, errores y movimiento reducido. Explica tu elección y luego crea la versión accesible más pequeña usando el sistema de diseño del proyecto.