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.

La parte jQuery è un pò più lunga, ed include anche la gestione del tasto ESC per chiudere la finestra:

$(document).ready(function() {
$('a[name=modal]').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();

$('#mask').css({
'width':maskWidth,
'height':maskHeight
});

$('#mask').fadeIn(1000);   
$('#mask').fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn(2000);

});

$('.window .close').click(function (e) {
e.preventDefault();
$('#mask, .window').hide();
});    

$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});        

$(document).keyup(function(e) {
if(e.keyCode == 27) {
$('#mask').hide();
$('.window').hide();
}
});

});

La prima parte gestisce l'apertura della finestra e il suo CSS (dimensione, posizione, ecc); la finestra si apre con un'animazione.

Poi abbiamo tre modi per chiudere la finestra:

• se si clicca sulla mask (lo sfondo semi trasparente per intenderci)
• se si clicca sul link di uscita (che sta nella finestra)
• la pressione del tasto ESC

Questa soluzione è facile e leggere e non si porta dietro molte librerie magari inutuli.

Certo che se già usate jQuery UI per altro allora forse vale pena usare la sua funzione integrata.