Modal box






Codice HTML

<h2>Esempio di Modal Box</h2>

<a href="#openModal">Apri Modal Box</a>

<div id="openModal" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a> <h2>Modal Box</h2> <p>Questa è una modal box di esempio che può essere creata usando i CSS3.</p> <p>Potresti fare un sacco di cose con un box come questo. Puoi avere un annuncio pop-up che mostra informazioni o avvisi. Oppure creare un modulo di login o di registrazione per gli utenti..</p> </div> </div>


Codice CSS

.modalDialog {
 position: fixed;
 font-family: Arial, Helvetica, sans-serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: rgba(0,0,0,0.8);
 z-index: 99999;
 opacity:0;
 -webkit-transition: opacity 400ms ease-in;
 -moz-transition: opacity 400ms ease-in;
 transition: opacity 400ms ease-in;
 pointer-events: none;
}

.modalDialog:target { opacity:1; pointer-events: auto; }

.modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); }

.close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; }

.close:hover { background: #00d9ff; }