Finestra modale
Finestre di dialogo modali accessibili con sfondo oscurato, trappola del focus e animazioni fluide. Disponibile nelle varianti predefinita, avviso, conferma e prompt. Costruita con Stimulus e Tailwind CSS.
Predefinita
Finestra modale generica con titolo, contenuto e pulsante di chiusura
████ ███████████████████████
████████████████████████████████████████████████
███████████████ █████
█████████████████████████████
█████████████
██████████████████
████ ████████ ███
████ ████████████████████████████
████████████████████████████████
████████████ ███████ ███████████████ ████████████████ ██████████████████████████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
█ ██████████████████████ ████
█████ ██████████████ █ ███████████████████
███████████ ██████
███ ██████████████████
██████ █ █████
███
███ ████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
Avviso
Dialogo di avviso con icona variante, messaggio e pulsante OK singolo
███ ███████ █████████ ██████ ███████ █████████ ██████████████ █████ ███
██
██████████████ █ █
█████ █ ████████ ████████████ █████████████████████ ██████████ ██████████████ ████████████████████ ██████████ ████████████ █████████████████ ████████████████ ████████████████████████ ████████████ █████████████ ███████████ █████████████████████████████ ██
████████ █ ████████ █████████████ ██████████████████████ ██████████ ███████████████ █████████████████████ ██████████ █████████████ ██████████████████ █████████████████ █████████████████████████ ████████████ █████████████ ███████████ ██████████████████████████████ ██
███████ █ ████████ ███████████ ████████████████████ ██████████ █████████████ ███████████████████ ██████████ ███████████ ████████████████ ███████████████ ███████████████████████ ████████████ █████████████ ███████████ ████████████████████████████ ██
████████ █ ████████ ███████████████ ████████████████████████ ██████████ █████████████████ ███████████████████████ ██████████ ███████████████ ████████████████████ ███████████████████ ███████████████████████████ ████████████ █████████████ ███████████ ████████████████████████████████ █
█
██████ █ ██████████████████████████████ ██ █████████████████████
██
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
█ ██████████████████████ ████
█████ ███████████████████ █ ███████████████████
███████████ █████████ ███████ █████████ ██████████████
████████ █ ███████ ███████ ██████ ███████████████
███ ███████████████████ ██████ ███████ █████████ ██████████████ █████
████████ █ █████████████████████████████████ █ ██████████████ █ █████
██████ █ █████
████ ███████████████████████
████████████████████████████████████████████████
███████████████ █████
███████████████████████████████████
██████████████████
██████████████████
████ ████████ ███
████ ████████████████████████████
████████████ ███████ ███████████████ ████████████████ ██████████████████████████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
Conferma
Dialogo di conferma con icona, messaggio e pulsanti Annulla/Conferma
███ ███████ █████████ ██████ ███████ █████████ ██████████████ ██████████ █████████████ █████████ ███
██
██████████████ █ █
█████ █ ████████ ████████████ █████████████████████ ██████████ ██████████████ ████████████████████ ██████████ ████████████ █████████████████ ████████████████ ████████████████████████ ████████████ █████████████ ███████████ █████████████████████████████ ██
████████ █ ████████ █████████████ ██████████████████████ ██████████ ███████████████ █████████████████████ ██████████ █████████████ ██████████████████ █████████████████ █████████████████████████ ████████████ █████████████ ███████████ ██████████████████████████████ ██
███████ █ ████████ ███████████ ████████████████████ ██████████ █████████████ ███████████████████ ██████████ ███████████ ████████████████ ███████████████ ███████████████████████ ████████████ █████████████ ███████████ ████████████████████████████ ██
████████ █ ████████ ███████████████ ████████████████████████ ██████████ █████████████████ ███████████████████████ ██████████ ███████████████ ████████████████████ ███████████████████ ███████████████████████████ ████████████ █████████████ ███████████ ████████████████████████████████ █
█
██████ █ ██████████████████████████████ ██ █████████████████████
██
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
█ ██████████████████████ ████
█████ █████████████████████ █ ███████████████████
███████████ █████████ ███████ █████████ ███████████████ █████████████
████████ █ ███████ ███████ ██████ ███████████████
███ ███████████████████ ██████ ███████ █████████ ██████████████ ██████████ █████████████ █████████
████████ █ █████████████████████████████████ █ ██████████████ █ █████
██████ █ █████
████ ███████████████████████
█████████████████████████████████████████████████
███████████████ █████
█████████████████████████████████████
██████████████████
██████████████████
████ ████████ ███
████ ████████████████████████████
████████████ ███████ ███████████████ ████████████████ ██████████████████████████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
Prompt
Dialogo prompt con icona, messaggio, campo di input e pulsanti Annulla/Invia
███ ███████ █████████ ██████ ███████ █████████ ████████████ ████ ██████████████████ ███ ████████████ ███ ██████████████ █████████ █████████████ █████████ ███
██
██████████████ █ █
█████ █ ████████ ████████████ █████████████████████ ██████████ ██████████████ ████████████████████ ██████████ ████████████ █████████████████ ████████████████ ████████████████████████ ████████████ █████████████ ███████████ █████████████████████████████ ██
████████ █ ████████ █████████████ ██████████████████████ ██████████ ███████████████ █████████████████████ ██████████ █████████████ ██████████████████ █████████████████ █████████████████████████ ████████████ █████████████ ███████████ ██████████████████████████████ ██
███████ █ ████████ ███████████ ████████████████████ ██████████ █████████████ ███████████████████ ██████████ ███████████ ████████████████ ███████████████ ███████████████████████ ████████████ █████████████ ███████████ ████████████████████████████ ██
████████ █ ████████ ███████████████ ████████████████████████ ██████████ █████████████████ ███████████████████████ ██████████ ███████████████ ████████████████████ ███████████████████ ███████████████████████████ ████████████ █████████████ ███████████ ████████████████████████████████ █
█
██████ █ ██████████████████████████████ ██ █████████████████████
██
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
████ ███████████████████████
█████████████████████████████████████████████████
███████████████ █████
████████████████████████████████████
█████████████
██████████████████
████ ████████ ███
████ ████████████████████████████
████████████ ███████ ███████████████ ████████████████ ██████████████████████████
█ ██████████████████████ ████
█████ ████████████████████ █ ███████████████████
███████████ █████████ ███████ █████████ ███████████████ ██████████████
█████████████ ███████████████████ ████████████
████████ █ ███████ ███████ ██████ ███████████████
███ ███████████████████ ██████ ███████ █████████ ██████████████ █████████ █████████████ █████████
████████████ ████ ██████████████████ ███ ████████████ ███
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
Registro delle modifiche
- v2.0.0: Converted to multi-style with alert, confirm, and prompt variants
- v1.1.0: Added ViewComponent format support
- v1.0.0: Initial release with focus trap, backdrop click to close
Ottieni l'Accesso Completo
Sblocca il codice sorgente di questo componente e di tutti gli altri. Un solo pagamento per l'accesso a vita.
Ottieni l'Accesso Ora