September 11
progettisti di siti catturare l'attenzione dei navigatori Web visualizzando Lightbox sulle pagine web. Se hai visto un'immagine pop-up su una pagina Web che si oscura, probabilmente avete visto un lightbox. Un modo per creare un lightbox è di inserire il vostro ID contenuti all'interno di una finestra pop-up. Questa finestra diventa un bambino della pagina Web padre. Usando un po 'di JavaScript, è possibile dare agli utenti la possibilità di chiudere una finestra lightbox facendo clic su un pulsante che si trova nella finestra principale.
1 Creare un nuovo documento HTML, e aggiungere il seguente codice alla sezione corpo del documento:
<Img src = "mia_immagine.jpg" />
Questo codice crea un'immagine che apparirà nella finestra lightbox.
2 Sostituire "mia_immagine.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 con il quale è stato salvato.
4 Chiudere il documento, e creare un nuovo documento HTML. Aggiungere il codice riportato di seguito per la sezione corpo del documento:
<Input type = valore "pulsante" = "Apri Lightbox" onclick = "openLightbox ( 'closeButton', 'blackscreen', '200', '200')" />
<Div id = "closeButton" class = "closeButton">
<Input type = valore "pulsante" = "Chiudi ID" onclick = "closeLightbox ( 'closeButton', 'blackscreen')" />
</ Div>
<Div id = "blackscreen" class = "blackSreen">
</ Div>
La prima riga di codice aggiunge un pulsante che chiama la "openLightbox" funzione JavaScript. Il div "closeButton" racchiude un pulsante che chiama la funzione che chiude la finestra lightbox. Il div finale crea l'effetto schermo nero che copre la finestra padre quando si apre la lightbox.
5 Incollare il codice CSS riportato di seguito nella sezione head del documento:
<Style type = "text / css">
.closeButton {z-index: 999; position: absolute; top: 0; left: 0; display: none;}
.blackSreen {height: 100%; width: 100%; background-color: nero;
z-index: 998; position: absolute; top: 20; left: 0; display: none;}
</ Style>
La classe .closeButton e le classi .blackScreen impostare le proprietà dei due div. Il display: none valori degli attributi li rendono invisibili quando la pagina si apre. I valori di z-index di 999 e 998 assicurano che i div appaiono sugli altri controlli nella finestra padre.
6 Aggiungere il codice riportato di seguito per la sezione di script del documento:
var lightboxWindow;
var lightboxURL = "lightbox.html";
larghezza var = 250;
var height = 300;
var top = 200;
var sinistra = 100;
La prima istruzione crea una variabile denominata lightboxWindow. Questa variabile contiene il nome della finestra che si apre lightbox. Sostituire "lightbox.html" con il nome del documento HTML è stato salvato nella prima sezione. I valori di larghezza e altezza impostare le dimensioni delle finestre in pixel. Cambiare quelle dimensioni, se ti piace fare la finestra lightbox grande o più piccolo. I valori superiori e sinistra insieme la posizione del lightbox quando compare sopra la finestra padre. Modificare questi valori, se necessario. Il valore superiore si riferisce alla distanza della lightbox dalla parte superiore dello schermo. Il valore di sinistra si riferisce alla distanza della lightbox dal bordo sinistro dello schermo.
7 Aggiungere la seguente funzione JavaScript sotto il codice elencato nel passaggio precedente:
Funzione openLightbox () {
var windowProperties = " '" + "width =" + larghezza +
"Height =" + altezza +
", Toolbar = 0, status = 0, menubar = 0, resiable = 0, le barre di scorrimento = 0" +
", A sinistra =" + sinistra + ", top =" + top +
" '";
document.getElementById ( "closeButton") style.display = "blocco".;
document.getElementById ( "blackscreen") style.display = "blocco".;
lightboxWindow = window.open (lightboxURL, 'ID', windowProperties);
}
Questa funzione crea la finestra ID e la apre. La variabile windowProperties contiene le proprietà che definiscono la finestra. Le dichiarazioni document.getElementById rendono la finestra padre diventa nero e appare il pulsante "Chiudi ID". Queste due affermazioni fanno riferimento i valori ID dei div "closeButton" e "blackscreen" definite nella sezione corpo. La dichiarazione finale si apre la finestra di lightbox.
8 Incollare il codice riportato di seguito dopo il codice mostrato nell'ultimo passaggio:
Funzione 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 ID". La funzione ripristina il colore della finestra padre alla normalità e nasconde il pulsante "Chiudi ID". E poi chiude la finestra lightbox.
9 Salvare il documento e aprirlo nel browser. Fare clic sul pulsante "Mostra ID" per visualizzare l'ID, e fare clic sul pulsante "Chiudi ID" per chiuderla.