jQuery: come creare un layer sovrapposto per l'effetto Lightbox

jQuery: come creare un layer sovrapposto per l'effetto Lightbox

Sicuramente vi sarà capitato di dover implementare un effetto Lightbox con jQuery. La caratteristica di questo effetto è che si deve adattare a qualsiasi tipo di layout, e per questo motivo l'elemento che si andrà a sovrapporre alla pagina dovrà avere le stesse dimensioni della pagina. Ma come si calcolano queste dimensioni? Vediamolo insieme.

L'errore da non commettere in questi casi è quello di prendere l'oggetto window come riferimento. Certo, questo oggetto di fatto rappresenta la finestra del browser, ma non tutto il contenuto della pagina.

Infatti, in altezza window si riferisce al contenuto visibile della pagina. Logicamente se la vostra pagina ha delle barre di scorrimento, il vostro Lightbox coprirà solo la parte compresa tra la parte superiore e inferiore della finestra, fino alla barra di stato del browser.

Per evitare questo problema si usa invece l'oggetto document, che rappresenta tutto il contenuto della pagina:


$('<div id="overlay"/>').css({

	width: $(document).width(),
	height: $(document).height(),
	position: 'absolute',
	top: 0,
	left: 0,
	background: '#000',
	opacity: 0.5
}).
appendTo('body').
hide();

Come si può notare, in questo caso abbiamo assegnato all'elemento sovrapposto le dimensioni dell'intero documento. Essendo posizionato in modo assoluto, l'elemento non terrà conto degli eventuali margini o padding impostati sull'elemento body.

Torna su