Progettisti di siti catturare l'attenzione dei navigatori del Web di visualizzazione lightbox in pagine Web. Se hai visto un'immagine pop-up sopra una pagina Web che si scurisce, avete probabilmente visto un lightbox. Un modo per creare una lightbox è quello di inserire il contenuto della lightbox all'interno di una finestra popup. Questa finestra diventa figlio della pagina Web padre. Utilizzando un po ' di JavaScript, si può dare agli utenti la possibilità di chiudere una finestra lightbox cliccando sul pulsante situato nella finestra padre.

Istruzioni

Creare documento di Lightbox

1

Creare un nuovo documento HTML e aggiungere il seguente codice alla sezione body del documento:

< img src="My_Image.jpg" / >

Questo codice crea un'immagine che apparirà nella finestra di lightbox.

2

Sostituire "My_Image.jpg" con il nome di un'immagine sul disco rigido o l'URL di un'immagine sul Web.

3

Salvare il documento e ricordare il nome sotto il quale è stato salvato.

Finestra di visualizzazione Lightbox

4

Chiudere il documento e creare un nuovo documento HTML. Aggiungere il codice riportato di seguito alla sezione body del documento:

< tipo input = "pulsante" value = "Apri Lightbox" onclick = "openLightbox ('closeButton', 'blackScreen', '200', 200')" / >

< div id = "closeButton" class = "closeButton" >
< tipo input = "pulsante" value = "Chiudi Lightbox" onclick = "closeLightbox ('closeButton', 'blackScreen')" / >
< / div >

< div id = "blackScreen" class = "blackSreen" >
< / div >

La prima riga di codice aggiunge un pulsante che chiama la funzione JavaScript "openLightbox". Il div "closeButton" racchiude un pulsante che chiama la funzione che chiude la finestra di lightbox. Il finale div crea l'effetto di schermo nero che copre la finestra padre quando si apre il lightbox.

5

Incollare il codice CSS seguente nella sezione head del documento:

< style type = "text/css" >
.closeButton {z-indice: 999; posizione: absolute; top: 0; left: 0; display: none;}
.blackSreen {altezza: 100%; width: 100%; background-color: Black;
z-indice: 998; Posizione: absolute; parte superiore: 20; Left: 0; display: none;}
< / stile >

La classe .closeButton e le classi di .blackScreen è possibile impostare le proprietà di due div. Il display: none i valori di attributo rendono invisibili quando si apre la pagina. I valori di z-index di 999 e 998 assicurano che i div compaiono sopra gli altri controlli nella finestra padre.

6

Aggiungere il codice riportato di seguito alla sezione script del documento:

var lightboxWindow;
var lightboxURL = "lightbox.html";

var width = 250;
var altezza = 300;

top var = 200;
var sinistra = 100;

La prima istruzione crea una variabile denominata lightboxWindow. Questa variabile contiene il nome della finestra lightbox che si apre. Sostituire "lightbox.html" con il nome del documento HTML che è stato salvato nella prima sezione. I valori di larghezza e altezza impostate le dimensioni di windows in pixel. Se ti piace fare la finestra lightbox maggiori o minori, modificare tali dimensioni. I valori superiore e sinistro impostare posizione di lightbox quando appare sopra la finestra padre. Modificare questi valori se necessario. Il valore superiore si riferisce alla distanza di lightbox dalla parte superiore dello schermo. Il valore di sinistra si riferisce alla distanza di lightbox dal bordo sinistro dello schermo.

7

Aggiungere la seguente funzione JavaScript sotto il codice elencato nel passaggio precedente:

Function openLightbox() () {

var windowProperties = "'" + "width =" + width +
", altezza =" + altezza +
", toolbar = 0, stato = 0, menubar = 0, resiable = 0, scrollbars = 0" +
", sinistra =" + sinistra + ", top =" + top +
"'";

document.getElementById("closeButton").style.display = "blocca";
document.getElementById("blackScreen").style.display = "blocca";

lightboxWindow = Window. Open (lightboxURL, 'lightbox', windowProperties);
}

Questa funzione crea la finestra lightbox e lo apre. La variabile windowProperties contiene le proprietà che definiscono la finestra. Le dichiarazioni di Document. getElementById fare il genitore finestra nera e il pulsante "Chiudi Lightbox" vengono visualizzati. Queste due istruzioni fanno riferimento ai valori di id del div "closeButton" e "blackScreen" definito nella sezione del corpo. La dichiarazione finale si apre la finestra di lightbox.

8

Incollare il codice riportato di seguito dopo il codice mostrato nell'ultimo passaggio:

Function closeLightbox (closeButton, blackScreen) {

Document. getElementById (closeButton).style.display = "none";
Document. getElementById (blackScreen).style.display = "none";
parent.lightboxWindow.close();
}

Questa funzione viene eseguita quando un utente fa clic sul pulsante "Chiudi Lightbox". La funzione Ripristina il colore della finestra padre alla normalità e nasconde il pulsante "Chiudi Lightbox". Quindi si chiude la finestra lightbox.

9

Salvare il documento e aprirlo nel browser. Fare clic sul pulsante "Visualizza Lightbox" per visualizzare il riquadro miniature e fare clic sul pulsante "Chiudi Lightbox" per chiuderla.

Consigli & Avvertenze

• Tutto quello che vuoi aggiungere al documento HTML che crea il lightbox. Questo esempio viene utilizzata un'immagine. È anche possibile visualizzare una mappa, forma o un altro elemento.
• Se gli utenti disattivare i pop-up nei loro browser o disabilitano JavaScript, finestre popup non si apre.