jQuery: finestra di dialogo modale trascinabile

Le tradizionali finestre di dialogo modali con jQuery sono per lo più statiche. Una volta mostrata la finestra sopra l'elemento semitrasparente, questa rimane nella posizione scelta. Sarebbe meglio invece se l'utente potesse scegliere di posizionarla dove meglio crede. Ciò è possibile tramite l'oggetto draggable di jQuery UI. Vediamo come.

Iniziamo con il dare degli stili CSS in modo che la finestra modale sia centrata sulla pagina e quindi nascosta:

#modal {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 300px;
	margin: -150px 0 0 -150px;
	background: url(modal.png) no-repeat;
	color: #fff;
	display: none;
	z-index: 2;
}

#modal #close {
	position: absolute;
	width: 30px;
	height: 30px;
	text-indent: -1000em;
	background: url(close.png) no-repeat;
	top: - 0.5em;
	right: 0.5em;
}

#modal p {
	padding: 3em;
	margin: 0;
	line-height: 1.4;
	font-size: 1.2em;
}

Lo z-index sarà superiore a quello del seguente elemento semitrasparente (tramite jQuery e il metodo css()) che andrà ad occupare tutta la pagina, anch'esso posizionato:

#overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #000;
	display: none;
	z-index: 1;
}

A questo punto dobbiamo:

1. rendere semitrasparente l'elemento sovrapposto alla pagina
2. aprire la finestra di dialogo e l'elemento sovrapposto, riposizionando la finestra al centro della pagina se è stata trascinata altrove
3. chiudere la finestra di dialogo e l'elemento sovrapposto quando l'utente fa clic sul pulsante di chiusura
4. usare draggable sulla finestra di dialogo in modo tale che
   • all'inizio del trascinamento l'elemento sovrapposto scompaia
   • alla fine del trascinamento l'elemento sovrapposto ricompaia

Ecco il codice:

$(function() {

	$('#overlay').css('opacity', 0.5);

	$('#open').click(function(event) {
	
		$('#modal').css({
			top: '50%',
			left: '50%',
			margin: '-150px 0 0 -150px'
		});
	
		
	    $('#overlay, #modal').show();
		
	
		event.preventDefault();
	});
	
	$('#close').click(function(event) {
	
		$('#modal, #overlay').hide();
	
		event.preventDefault();
	
	
	});
	
	$('#modal').draggable({
		start: function() {
		
			$('#overlay').hide();
		
		},
		
		stop: function() {
		
			$('#overlay').show();
		
		}
	});

});

Potete visionare l'esempio finale in questa pagina.