Generatore di Modali CSS

Cosa copre il CSS generato

Il codice definisce lo stile di cinque classi:

• .modal-backdrop: livello fisso a tutto schermo, sfondo scuro semitrasparente (rgba(17, 24, 39, .62)), griglia centrata e 24 px di spazio attorno al pannello.
• .modal-panel: scheda bianca con larghezza min(100%, Npx), il tuo raggio degli angoli, ombra morbida e angoli tagliati.
• .modal-header: barra di accento di 4 px nel tuo colore, poi l’area del titolo con un padding di 20 px 24 px.
• .modal-body: l’area del contenuto, con padding di 18 px 24 px.
• .modal-actions: una riga di pulsanti allineata a destra, con uno spazio di 10 px.

Struttura HTML corrispondente

Il CSS prevede questo markup:

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>Conferma</h2>
    </div>
    <div class="modal-body">
      <p>Vuoi davvero continuare?</p>
    </div>
    <div class="modal-actions">
      <button>Annulla</button>
      <button>Continua</button>
    </div>
  </div>
</div>

Tieni il pannello dentro lo sfondo: lo sfondo è il livello fisso e il pannello è centrato al suo interno. Per aprire e chiudere la modale, inserisci e rimuovi lo sfondo dal codice della tua applicazione, oppure alterna la sua visualizzazione.

Adattamento agli schermi piccoli

La larghezza del pannello è limitata con min(100%, Npx), quindi un valore di 520 px diventa la larghezza piena della finestra su un telefono stretto, meno i 24 px di spazio dello sfondo. La riga delle azioni resta allineata a destra e i contenuti lunghi scorrono con la pagina. Per i casi comuni non servono media query.

Note e limiti

Il generatore produce solo CSS. Non include JavaScript per aprire o chiudere la modale, bloccare il focus della tastiera o gestire il tasto ESC. Aggiungi questa logica nella tua applicazione.

L’intestazione mantiene sempre la sua barra di accento di 4 px; se non ti serve, rimuovi o ricolora la regola nel codice copiato.