Modal vs. Popover
Un modal detiene la página hasta que terminas la tarea. Un popover se queda al lado de su botón y deja que la página siga funcionando.
Usa un modal para una tarea que debe terminar primero. Usa un popover para detalles adicionales o una acción pequeña.
Ver lo que hace cada patrón
Prueba cada ejemplo. Luego lea sobre el trabajo para el que fue hecho.
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"
Panel emergente
Un popover es un panel pequeño conectado al control que lo abrió. Puede contener contenido estructurado y acciones sin bloquear la página.
popover attribute / PopoverSeleccione un avatar para abrir un perfil pequeño. Muestra el rol de la persona, los datos de contacto y una acción de Seguir.
- Úsalo cuando
- Úselo cuando el contenido pertenezca junto a su activador y las personas puedan seguir usando la página.
- No lo uses cuando
- Nunca lo uses para un aviso corto solo con etiqueta. Usa un tooltip en su lugar.
- Nombre usado en código
popover attribute / Popover
Comparación rápida
| Patrón de UI | Mejor para | No para | Nombre usado en código |
|---|---|---|---|
| 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" |
| Panel emergentePopover | Úselo cuando el contenido pertenezca junto a su activador y las personas puedan seguir usando la página. | Nunca lo uses para un aviso corto solo con etiqueta. Usa un tooltip en su lugar. | popover attribute / Popover |
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 Diálogo modal (Modal Dialog), Panel emergente (Popover) para nuestro flujo de usuario real. Usa esta regla: Un modal detiene la página hasta que terminas la tarea. Un popover se queda al lado de su botón y deja que la página siga funcionando. 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.