Generatore di modale (finestra pop-up) con dialog

Generatore di modale (finestra pop-up) con dialog: a cosa serve

Le finestre modali servono a confermare un’azione, mostrare un breve modulo o evidenziare un invito senza portare la persona fuori dalla pagina. Fatte a mano con un div, spesso falliscono con tastiera e screen reader.

Questo generatore usa l’elemento dialog con showModal(), supportato da tutti i browser attuali dal 2022: il browser mette la finestra in primo piano, rende inerte il resto della pagina, blocca il focus, chiude con Esc e restituisce il focus al pulsante. Il codice aggiunge lo stile, il clic fuori per chiudere e un ingresso morbido con @starting-style che rispetta chi preferisce meno movimento.

Come si usa

1. Scrivi titolo, testo e pulsanti.
2. Scegli colore, larghezza e angoli.
3. Prova nell’anteprima e copia il codice.

Quando usarlo

• Invito a prenotare su WhatsApp.
• Conferma prima di un’azione.
• Avviso di novità o breve modulo.

Domande frequenti

Perché usare l’elemento dialog?

Con showModal() il browser mette la finestra sopra a tutto, rende inerte il resto della pagina, blocca il focus al suo interno, chiude con Esc e restituisce il focus al pulsante che l’ha aperta. Prima serviva parecchio JavaScript e quasi sempre restavano lacune di accessibilità.

Funziona in tutti i browser?

Sì, il dialog è supportato da Chrome, Edge, Firefox e Safari dal 2022.

Posso aprire il modale da solo all’ingresso nel sito?

Puoi, ma i pop-up che si aprono senza che la persona lo chieda di solito danno fastidio e, su smartphone, Google può penalizzare le pagine con annunci invasivi che coprono il contenuto. Meglio aprirlo da un pulsante.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili