Hvordan å lukke Lightbox som forelder

Site designere fange oppmerksomheten til Web surfere ved å vise lysbord på websider. Hvis du har sett et bilde dukker opp over en webside som mørkner, har du sannsynligvis sett et lysbord. En måte å lage en lysboks er å plassere lysbord innholdet i en pop-up vindu. Dette vinduet blir et barn av den overordnede websiden. Ved hjelp av en liten Javascript, kan du gi brukerne muligheten til å lukke en lysboks vinduet ved å klikke på en knapp som ligger i det overordnede vinduet.

Bruksanvisning

Opprett Lightbox Document

1 Opprett en ny HTML-dokument, og legg til følgende kode til dokumentets hoveddel:

<Img src = "My_Image.jpg" />

Denne koden skaper et bilde som skal vises i lysbilde vinduet.

2 Erstatt "My_Image.jpg" med navnet på et bilde på harddisken eller nettadressen til et bilde på nettet.

3 Lagre dokumentet, og husker navnet som du lagret den.

Vis Lightbox Window

4 Lukk dokumentet og opprette en ny HTML-dokument. Legg inn koden nedenfor i dokumentets hoveddel:

<Input type = "button" value = "Åpne Lightbox" onclick = "openLightbox ( 'closeButton', 'black', '200', '200')" />

<Div id = "closeButton" class = "closeButton">
<Input type = "button" value = "Close Lightbox" onclick = "closeLightbox ( 'closeButton', 'black')" />
</ Div>

<Div id = "black" class = "blackSreen">
</ Div>

Den første linjen med kode legger til en knapp som kaller "openLightbox" Javascript-funksjonen. Den "closeButton" div omslutter en knapp som kaller funksjonen som lukker lysbilde vinduet. Den endelige div skaper den svarte skjermeffekt som dekker det overordnede vinduet når lysbilde åpnes.

5 Lim inn CSS-koden nedenfor til dokumentets hodedelen:

<Style type = "text / css">
.closeButton {z-index: 999; position: absolute; top: 0; venstre: 0; display: none;}
.blackSreen {height: 100%; width: 100%; background-color: black;
z-index: 998; position: absolute; top: 20; venstre: 0; display: none;}
</ Style>

Den .closeButton klasse og .blackScreen klasser angi egenskapene til de to divs. Displayet: none attributtverdier gjøre dem usynlige når siden åpnes. De z-indeksverdier for 999 og 998 sikre at divs vises over de andre kontrollene i det overordnede vinduet.

6 Legg inn koden nedenfor i dokumentet manus seksjon:

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

Var width = 250;
Var height = 300;

Var top = 200;
Var venstre = 100;

Den første setningen oppretter en variabel kalt lightboxWindow. Denne variabelen inneholder navnet på lysbilde vinduet som åpnes. Erstatt "lightbox.html" med navnet på HTML-dokumentet du lagret i den første delen. Bredde- og høydeverdiene satt vinduene dimensjoner i piksler. Endre disse dimensjonene hvis du liker å lage lysbilde vinduet større eller mindre. De øvre og venstre verdier satt lysbilde posisjon når den vises over det overordnede vinduet. Endre disse verdiene om nødvendig. Verdien av topp refererer til lysbord avstand fra toppen av skjermen. Verdien av venstre viser til lysbord avstand fra skjermen sin venstre kant.

7 Legg til følgende Javascript-funksjonen under Kodene i forrige trinn:

funksjon openLightbox () {

Var windowProperties = " '" + "width =" + bredde +
"Height =" + høyde +
"Verktøylinje = 0, status = 0, menylinje = 0, resiable = 0, scrollbars = 0" +
", Venstre =" + venstre + ", top =" + topp +
" '";

document.getElementById ( "closeButton") style.display = "block.";
document.getElementById ( "black") style.display = "block.";

lightboxWindow = window.open (lightboxURL, 'lightbox', windowProperties);
}

Denne funksjonen lager lysbilde vinduet og åpner det. Den windowProperties variable har de egenskapene som definerer vinduet. De document.getElementById uttalelser gjør det overordnede vinduet bli svart og "Close Lightbox" -knappen vises. Disse to uttalelsene referere til id verdiene av de "closeButton" og "black" divs definert i kroppen delen. Den endelige uttalelsen åpner lysbilde vinduet.

8 Lim inn koden vist nedenfor etter koden som vises i siste trinn:

funksjon closeLightbox (closeButton, black) {

document.getElementById (closeButton) .style.display = "ingen";
document.getElementById (black) .style.display = "ingen";
parent.lightboxWindow.close ();
}

Denne funksjonen kjøres når en bruker klikker på "Close Lightbox" -knappen. Funksjonen gjenoppretter det overordnede vinduet farge til normal og skjuler "Close Lightbox" -knappen. Det stenger deretter lysbilde vinduet.

9 Lagre dokumentet, og åpne den i nettleseren din. Klikk på "Vis Lightbox" -knappen for å vise lysbilde, og klikk på "Close Lightbox" -knappen for å lukke det.

Hint

  • Legg noe du liker i HTML-dokumentet som skaper lysbilde. Dette eksemplet bruker et bilde. Du kan også vise et kart, form eller et annet element.
  • Hvis brukerne deaktivere pop-ups i sine nettlesere eller deaktivere Javascript, pop-up vinduer kan ikke åpnes.