modal window

Mattepuffo's logo
Una semplice finestra modale con jQuery

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.