Finestre modali in HTML5 e CSS3

I box modali sono uno degli strumenti più utilizzati dai web designer. Dalle notifiche ai login form, dalle pubblicità alle gallery, i box modali hanno da sempre un ruolo primario nell'interazione con l'utente. In questo articolo, quindi, vediamo come crearne semplicemente uno in HTML5 e CSS3! Prima di iniziare vi specifico subito i due link più interessanti: dal primo puoi visualizzare un esempio interattivo di quello che andremo a creare mentre, da questo secondo link, potrete effettuare direttamente il download.

L'HTML

Il primo passo per creare la nostra finestra modale è questo breve e semplice codice HTML5.

<a href="#apriBox">Apri il box</a>
<div id="apriBox" class="modalBox">

Sul primo rigo abbiamo creato un semplice link che rimanda all'ID di un div denominato 'apriBox', collegato a sua volta alla classe 'boxModale' dove andremo a specificare le nostre classi CSS.  Il secondo rigo, invece, vede protagonista il div 'apriBox' appena accennato. Al suo interno andrà tutto il contenuto che vogliamo appaia nel box modale. Ad esempio:

<div id="apriBox" class="modalBox">
 <div>
  <a href="#chiudi" title="Chiudi" class="chiudi">X</a>
  <h2>Box Modale</h2>
  <p>Questo è solamente un esempio di box modale</p>
  <p>Populo temporibus eu vix. Maluisset vituperata cu pri, vim dolorem placerat referrentur ex, pri ex oratio graecis appareat. Nisl zril imperdiet id vim, possim deterruisset vis no. Suas vivendo id sed. Omnesque electram eum ei, an amet modus labitur qui. Pri euismod convenire in, principes necessitatibus no has.</p>
 </div>
</div>

Il CSS

Vediamo ora come attribuire una classe CSS per rendere graficamente migliore l'aspetto del nostro box modale. 

.modalBox {
 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;
}

Ora che il nostro box modale appare in questa nuova veste fiammante, manca solo un particolare. Il CSS per il pulsante di chiusura, vediamolo:

.chiudi {
 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;
}

.chiudi:hover { background: #C90a;}

Ed ora la vera e propria magia. La comparsa del box modale avviene unicamente attraverso l'utilizzo di CSS3. Nello specifico il codice è il seguente:

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

.modalBox > 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);
}

Conclusioni

Adesso che abbiamo creato il nostro box modale possiamo usarlo a nostro piacimento. Possiamo, infatti, utilizzarlo per far apparire pubblicità, login form, avvisi importanti e tanto, tanto altro. Per qualsiasi delucidazione potete contattarmi a noframe@lucapipolo.it. Il codice sorgente di tutto l'articolo è disponibile qui per il download.