Moduli e pannelli di uscita

1) Quando usare

Modal (interazione con backdrop) - Per soluzioni critiche e attività brevi che richiedono piena attenzione: conferma dell'azione, consenso legale, operazioni pericolose, moduli brevi di 1-2 campi. Blocca lo sfondo.
Drawer/Sheet - Per l'estensione contestuale: parti dell'oggetto, modifica degli attributi, selezione dall'elenco, navigazione assistita. Lo sfondo è visibile e il contesto viene salvato.

• Se l'azione richiede concentrazione e conferma di Modal.
• Quando si desidera salvare il contesto e dare una panoramica «parallela» del → Drawer.

2) Struttura e dimensioni

Modal

Il titolo (obbligatorio) il testo principale della zona CTA (Primary/Secondary/Destructive).
Dimensioni: S (480-560 px), M (640-720 px), L (≤ 840 px). C'è uno sheet a schermo intero sul cellulare.

Drawer / Sheet

Direzione: bordo destro (dectop, modifica), inferiore (mobile, azioni), a volte sinistro (navigazione).
Larghezza: 360-480 (S), 480-640 (M), 640-800 (L). Su cellulare: 90-100% larghezza/altezza.

L'altezza del contenuto è sempre limitata, dentro è lo scroll; titolo/100 sono fissi.

3) Copiratting e CTA

Titolo = azione/significato: «Conferma puntata», «Scelta metodo di pagamento», «Richiesta KYC».
Il testo è breve, 1-2 frasi. Evitare le formule vaghe.
CTA: un Primary, accanto a Secondary (Annulla) e, se necessario, Destructive.

Per le azioni rischiose, aggiungere una spiegazione in 1 riga: "Azione irreversibile. Puoi annullare entro 10 secondi (se disponibile)"

4) Comportamento e stato

Apertura: risposta immediata da 100 ms, quindi animazione da 120 a 180 ms.
Chiusura: più veloce di apertura (80-140 ms), attivato al trigger.
Busy: 'aria-busy = «true» sul contenitore, pulsante che blocca le ripetizioni.
Unsaved - Quando si chiude, viene visualizzata una finestra di avviso («Modifiche non salvate»).
Escape/click in sottofondo: validi per interazioni non pericolose; Solo pulsanti espliciti per i critici.

5) Disponibilità (A11y)

Contenitore: «role =» dialogog «e» aria-modal = «true» (per un vero modalino).
Il titolo è collegato attraverso «aria-labelledby»; descrizione: 'aria-describedby'.
Focus trap interno il focus primario è sull'intestazione o sul primo elemento interattivo.
Ripristina il trigger originale dopo la chiusura.
Niente scroll di sfondo: 'Un documento. body {overflow: hidden;} 'o'inert'sul resto del DON.
Il supporto della tastiera è ciclico. Esc chiude (se non vietato scenograficamente).
Tieni conto dì prefers-reduced-motion ": disattivazione/semplificazione delle animazioni.

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 e architettura

Il rendering tramite il portale (livello sopra l'applicazione) mostra meno problemi con il z-index.
Montare il contenuto pigro alla prima apertura, smontarlo dopo l'animazione di chiusura (o tradurre offscreen).
Animare solo «form/opacity»; evitare costosi blur/ombre con grandi dimensioni.
Bloccate lo scroll di sfondo (scroll-lock), mantenete la posizione corrente per evitare di saltare dopo la chiusura.
Per elenchi di grandi dimensioni in drawer: utilizzare la virtualizzazione.

7) Pattern mobili

Bottom sheet per azioni/conferme veloci: gesti swipe verso il basso per chiudere (con soglia).
Sticky-CTA in basso; il pulsante di chiusura è in alto a sinistra.
Safe-area indentazione (notch/gesture areas).
La tastiera a schermo non deve sovrapporre il CTA; layout - «sollevamento» dei contenuti o pannello fisso sopra la tastiera.

8) Design motion

Ingresso: fade + spostamento leggero (modal: Y, drawer: asse di comparsa). 120-180 mc.
Uscita: più breve (80-140 ms), easing'cubic-bezier (0. 2,0,0. 2,1)`.
Sfondo (backdrop) - Opacità 0-0. 4–0. 6. Niente pulsazioni, niente sbalzi infiniti.
Per «preferers-reduced-motion»: senza spostamento, solo fade.

9) Controllo della chiusura

Chiusura immediata solo in caso di operazioni sicure.
Se c'è un errore, rimaniamo in una finestra di dialogo, e mostriamo il motivo e Retry.
In background, chiudi la finestra di dialogo e mostra il toast «Eseguiamo in sfondo»..., più la sezione Cronologia.

10) Script tipici

10. 1 Conferma puntata (Modal)

Contenuto: evento, coefficiente, importo, vincita potenziale, durata del coefficiente.
Pulsanti Conferma (primary), Annulla.
Pattern ritardo> 3 c: Testo in attesa di conferma... quando il coefficiente cambia, è un update onesto.

10. 2 Cache (Modal/Sheet)

Visualizza l'importo corrente della cache e il timer della finestra.
Conferma + possibile Undo (se la regola lo consente).

10. 3 Scelta del metodo di pagamento (Drawer)

Elenco dei metodi con commissione/ETA; scegliendo un mini-modulo →.
Salvare il metodo di default Restituzione senza perdita dei dati immessi.

10. 4 KYC (Drawer → Modal)

Drawer per scaricare documenti/suggerimenti.
Modal quando si tenta di chiudere con un caricamento incompleto - Avviso non salvato.

10. 5 Limiti di gioco responsabile (Modal)

Radio Giorno/Settimana/Mese, campo della somma, stringa «Entrerà in vigore attraverso»...

11) Anti-pattern

Moduli nidificati (modal sopra modal). Utilizzare una sola finestra o sequenza di passaggi.
Modalka per la visualizzazione normale dei contenuti (meglio drawer/pagina).
Una croce nascosta o una chiusura solo per «microzone».
Un'azione rischiosa permette di chiudere il fondo.
Forma lunga nel modaletto (→ in una schermata/pannello separata).
Nessuna ricomparsa al trigger.

12) Token di progettazione (esempio)

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) Snippet comportamento

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) Metriche ed esperimenti

Open Rate/Complection Rate per modali: quanti hanno aperto e completato l'azione.
Time-to-Decection - Dall'apertura al click Primary.
Dismiss Rate e motivi (chiusura per Esc/fondo vs Annulla).
Errore/Retry Rate negli script busy.
A/B: modal vs drawer, testo CTA, ordine dei campi, «conferma» vs «undo».

15) Lista assegni QA

Disponibilità

• 'role = "dialogog", "aria-modal =" true ", corretti" aria-labelledby/-describedy ".
• Focus trap Il trucco torna al trigger.
• Esc chiude (se consentito); Tav è ciclico.
• Contrasto dell'AA; Non è solo il colore a trasmettere il significato.

Comportamento

• TTFF da 100 ms; animazioni in 120-180 mc/out 80-140 mc.
• Scroll-lock sfondo senza «saltare» pagina.
• Unsaved-guard a forma sporca.
• Stato Busy, Retry/errori corretti.

Interfaccia

• Titolo chiaro e un Primary-CTA.
• La croce/il pulsante Chiudi sono disponibili.
• Le quote sono adattive; su un cellulare - sheet con un gesto.

Performance

• I portali/z-index sono corretti; senza «schiarire».
• Inizializzazione pigra; animati solo da form/opacity.

16) Documentazione in progettazione

Componenti: «Modal», «Drawer/Sheet», «ConfirmDialog», «UnsavedGuard».
Token: quote, rientri, ombre, animazioni, backdrop, focus-ring.
Guidi: «Quando il modal vs drawer», modelli di copiratting, attività rischiose (confirm/undo), scroll-lock e portals, reduce-motion.
Do/Don't-gallery: nested modals (don't), forme lunghe nel modaletto (don't), sheet per l'estensione del contesto (do).

Breve riepilogo

Modalka per soluzioni a piena attenzione, drawer per espandere il contesto senza interruzione di flusso. Mantenere la struttura semplice, CTA semplice e le interazioni prevedibili e accessibili. Rispettate la performance, bloccate lo sfondo e restituite il trucco. Negli scenari di iGaming, questo influisce direttamente sulla fiducia: la conferma delle scommesse, la cache, la scelta del metodo di pagamento e KYC devono essere oneste, rapide e sicure.