Modales y paneles de salida

1) Cuándo utilizar

Modal (diálogo con la puerta trasera) - para soluciones críticas y tareas cortas que requieren atención completa: confirmación de la acción, consentimiento legal, operaciones peligrosas, formas breves ≤ 1-2 campos. Bloquea el fondo.
Drawer/Sheet (panel de salida): para la extensión contextual: detalles del objeto, edición de atributos, selección de lista, navegación asistida. El fondo es visible → el contexto se conserva.

• Si la acción necesita concentración y confirmación de → Modal.
• Cuando necesite guardar el contexto y dar una visión «paralela» de → Drawer.

2) Estructura y dimensiones

Modal

El título (obligatorio) → el texto principal → la zona CTA (Primary/Secondary/Destructive).
Dimensiones: S (480-560 px), M (640-720 px), L (≤ 840 px). Hay una hoja de pantalla completa en el móvil.

Drawer / Sheet

Dirección: margen derecho (escritorio, edición), fondo (móvil, acciones), a veces izquierdo (navegación).
Ancho: 360-480 (S), 480-640 (M), 640-800 (L). En móvil: 90-100% de ancho/alto.

La altura del contenido siempre es limitada, en el interior es un skroll; título/CIEN son fijos.

3) Copyright y CTA

Título = acción/significado: «Confirmar apuesta», «Elegir método de pago», «KYC requerido».
Texto breve, 1-2 frases. Evite fórmulas vagas.
CTA: una Primary, junto a Secondary («Cancelar») y, si es necesario, Destructive.

Para actividades de riesgo, agregue una explicación a 1 línea: "La acción es irreversible. Podrá cancelar dentro de 10 segundos (si está disponible)"

4) Comportamiento y estados

Apertura: respuesta instantánea ≤ 100 ms, luego animación 120-180 ms.
Cierre: más rápido que la apertura (80-140 ms), devolvemos el enfoque al disparador.
Busy: 'aria-busy = «true»' en el contenedor, botón con bloqueo de repeticiones.
Unsaved (forma sucia): al cerrar - diálogo-advertencia («Hay cambios no guardados»).
Escape/haga clic en el fondo: permitido para diálogos no peligrosos; para los críticos, sólo botones explícitos.

5) Disponibilidad (A11y)

Contenedor: 'role = «dialog»' y 'aria-modal = «true»' (para un modal real).
El título está enlazado a través de 'aria-labelledby'; descripción - 'aria-describedby'.
Focus trap en el interior; enfoque principal: en el título o en el primer elemento interactivo.
Devuelve el enfoque al disparador original después del cierre.
Sin fondo de fondo: 'document. body {overflow: hidden;} 'o' inert 'en el resto del DOM.
Compatibilidad con teclado: Amb/Shift + Nat son cíclicos; Aprox cierra (a menos que esté prohibido script).
Tenga en cuenta 'prefers-reduced-motion': deshabilitar/simplificar las animaciones.

html
<div class="backdrop" data-open hidden></div>
<div class="dialog" role="dialog" aria-modal="true" aria-labelledby="d-title" aria-describedby="d-desc" hidden>
<h2 id =" d-title "> Confirm Bid </h2>
<p id =" d-desc "> Sum of 200 ₴ by factor 1. 85</p>
<div class="actions">
<button class =" btn btn--primary "> Confirm </button>
<button class =" btn btn--ghost "> Cancel </button>
</div>
</div>

6) Performance y arquitectura

Render a través del portal (capa encima de la aplicación) → menos problemas con el índice z.
Montar el contenido de forma perezosa la primera vez que se abre, desmontar después de la animación de cierre (o traducir offscreen).
Anime sólo 'transformación/opacity'; evite las costosas sombras con grandes dimensiones.
Bloquea el fondo de desplazamiento (scroll-lock), mantén la posición actual para que no salte después del cierre.
Para listas grandes en drawer: utilice la virtualización.

7) Patrones móviles

Hoja de bottom para acciones/confirmaciones rápidas: gestos de deslizamiento hacia abajo para cerrar (con umbral).
Sticky-CTA en la parte inferior; el botón de cierre está en la parte superior izquierda.
Sangría de área segura (notch/gesture areas).
El teclado en pantalla no debe solapar CTA; layout - «elevación» de contenido o panel fijo sobre el teclado.

8) Diseño de movimiento

Entrada: fade + cambio ligero (modal: por Y, drawer: por el eje de aparición). 120-180 ms.
Salida: más corto (80-140 ms), easing 'cubic-bezier (0. 2,0,0. 2,1)`.
Fondo (backdrop): opacidad 0 → 0. 4–0. 6. Sin pulsaciones y miradas interminables.
Para 'prefers-reduced-motion': sin cizallamiento, solo fade.

9) Gestión de cierre

Cierre inmediato sólo en operaciones seguras.
En caso de error - permanecer en el diálogo, mostrar la causa y Retry.
En segundo plano, cerrar el diálogo y mostrar el brindis «Realizamos en el fondo»..., además de la sección «Historia».

10) Scripts típicos de iGaming

10. 1 Confirmación de apuesta (Modal)

Contenido: evento, factor, cantidad, ganancia potencial, fecha de caducidad del factor.
Botones: «Confirmar» (primario), «Cancelar».
Patrón de retraso> 3 s: texto «Esperamos confirmación»...; cuando se cambia el coeficiente, el apdate es honesto.

10. 2 Cashout (Modal/Sheet)

Muestra la cantidad actual de memoria caché y el temporizador de la ventana.
Confirmación + posible Undo (si el reglamento lo permite).

10. 3 Selección del método de pago (Drawer)

Lista de métodos con comisiones/AETA; selección → mini-formulario.
Guardar el método predeterminado; devoluciones sin pérdida de los datos introducidos.

10. 4 KYC (Drawer → Modal)

Drawer para descargar documentos/sugerencias.
Modal cuando intenta cerrar con una descarga pendiente: alerta de no guardada.

10. 5 Límites de juego responsable (Modal)

Radio «Día/Semana/Mes», campo de suma, línea «Entrará en vigor a través de»....

11) Anti-patrones

Modales anidados (modal encima del modal). Utilice un diálogo o una secuencia de pasos.
Modal para la visualización normal del contenido (mejor drawer/página).
Cruz oculta o cierre solo por «microzona».
Acción arriesgada → permiso para cerrar «por el fondo».
Forma larga en el modal (→ lleve a una pantalla/panel separado).
No hay vuelta de enfoque al disparador.

12) Tokens del sistema de diseño (ejemplo)

json
{
"dialog": {
"radius": 12,
"shadow": "var(--elev-4)",
"sizes": { "s": 520, "m": 680, "l": 840 },
"backdropOpacity": 0. 5,
"padding": "20 24",
"gap": 16
},
"drawer": {
"width": { "s": 360, "m": 480, "l": 640 },
"edge": "right",
"radius": 12,
"shadow": "var(--elev-4)"
},
"motion": {
"inMs": 160,
"outMs": 120,
"ease": "cubic-bezier(0. 2,0,0. 2,1)",
"reduce": true
},
"a11y": {
"useAriaModal": true,
"focusTrap": true,
"returnFocus": true
}
}

css
.backdrop[data-open]{position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:saturate(80%); opacity:1; transition:opacity. 16s}
.dialog,[data-drawer]{position:fixed; background:var(--bg-elevated); border-radius:12px; box-shadow:var(--elev-4);}
.dialog{inset:auto; left:50%;top:50%;transform:translate(-50%,-50%); max-width:840px; width:min(100% - 32px, var(--dialog-w,680px));}
[data-drawer="right"]{top:0; right:0; height:100%;width:var(--drawer-w,480px); transform:translateX(0)}
.dialog[hidden],.backdrop[hidden]{display:none}

13) Snippets de comportamiento

js const openBtn = document. getElementById('open');
const dlg = document. querySelector('.dialog');
let prevFocus;

function openDialog() {
prevFocus = document. activeElement;
dlg. hidden = false; document. body. style. overflow = 'hidden';
const focusable = dlg. querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
(focusable[0]        dlg). focus();
function onKey(e){
if(e. key==='Escape') return closeDialog();
if(e. key!=='Tab') return;
const first = focusable[0], last = focusable[focusable. length-1];
if(e. shiftKey && document. activeElement===first){ e. preventDefault(); last. focus(); }
else if(!e.shiftKey && document. activeElement===last){ e. preventDefault(); first. focus(); }
}
dlg. addEventListener('keydown', onKey);
dlg. dataset. off = ()=> dlg. removeEventListener('keydown', onKey);
}
function closeDialog() {
dlg. dataset. off && dlg. dataset. off();
dlg. hidden = true; document. body. style. overflow = '';
prevFocus && prevFocus. focus();
}

js let startY=0, delta=0;
const sheet = document. querySelector('.sheet');
sheet. addEventListener('touchstart', e => startY = e. touches[0].clientY);
sheet. addEventListener('touchmove', e => {
delta = Math. max(0, e. touches[0].clientY - startY);
sheet. style. transform = `translateY(${delta}px)`;
});
sheet. addEventListener('touchend', () => {
if (delta > 120) sheet. classList. remove('open'); else sheet. style. transform = '';
delta = 0;
});

14) Métricas y experimentos

Tasa abierta/Tasa completa por modal: cuántos han abierto y completado la acción.
Time-to-Decision: desde el descubrimiento hasta el clic en Primary.
Nota de Dismiss y Razones (Cierre por Amb/Fon vs «Cancelar»).
Error/Retry Rate en scripts busy.
A/B: modal vs drawer, texto CTA, orden de campos, «confirmación» vs «undo».

15) QA-check-list

Disponibilidad

• 'role =' dialog ',' aria-modal = 'true', los correctos 'aria-labelledby/-describedby'.
• Focus trap funciona; el enfoque vuelve al disparador.
• Aprox cierra (si se permite); Amb es cíclico.
• Contraste ≥ AA; no sólo el color transmite el significado.

Comport

• TTFF ≤ 100 ms; animaciones en 120-180 ms/out 80-140 ms.
• Scroll-lock de fondo sin «saltar» la página.
• Guardia desordenada en forma sucia.
• Estado de compra, errores/Retry correctos.

Interfaz

• Titular claro y uno Primary-CTA.
• El botón «Cerrar» está disponible.
• Las dimensiones son adaptativas; en el móvil - sheet con un gesto.

Perf

• Los portales/z-index son correctos; sin «deslizamiento».
• Inicialización perezosa; sólo se animan por transformación/opacity.

16) Documentación en el sistema de diseño

Los componentes son: 'Modal', 'Drawer/Sheet', 'ConflmDialog', 'UnsavedGuard'.
Tokens: dimensiones, sangría, sombras, animaciones, backdrop, focus-ring.
Gaids: «Cuando modal vs drawer», patrones de redacción, acciones arriesgadas (ref/undo), scroll-lock y portals, reducción-motion.
Do/Don 't-gallery: modals nested (don' t), formas largas en modalk (don 't), sheet para ampliar el contexto (do).

Resumen breve

Modalk - para soluciones bajo total atención, drawer - para ampliar el contexto sin romper el flujo. Mantenga la estructura simple, el CTA es inequívoco y las interacciones son predecibles y accesibles. Respeta el rendimiento, bloquea el fondo y devuelve el enfoque. En los escenarios de iGaming, esto afecta directamente a la confianza: las confirmaciones de apuestas, el cacheo, la elección del método de pago y KYC deben ser honestas, rápidas y seguras.