Home / Programmazione / Javascript - AJAX / Una semplice finestra modale con jQuery
Mattepuffo

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.

 

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.