Una semplice finestra modale con jQuery
Le finestre modali sono usate in più ambiti.
Questo perchè al suo interno è possibile mettere quello che vogliamo:
- avvisi
- form
- Google Maps
- .....
Se avete jQuery UI potete sfruttare la sua libreria, altrimenti è possibile ottenere lo stesso effetto in altre maniere.
Useremo jQuery e un pò di CSS.
Cominciamo dalla pagina HTML.
Dopo aver incluso jQuery:
<div id="boxes">
<div id="dialog" class="window">
<a href="#" class="close">Close it</a><br/><br/>
VOSTRO CONTENUTO
</div>
<div id="mask"></div>
</div>
Un semplice div dove all'interno abbiamo un link per chiudere la finestra, il contenuto che vi serve e il div mask che serve per riempire la finestra.
Il CSS sarà una cosa del genere:
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes #dialog {
width:700px;
height:700px;
padding:10px;
background-color:#ffffff;
}
#boxes .window {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
display:none;
z-index:9999;
padding:20px;
}
Nulla di particolare.