Hvordan lage en HTML Lightbox

Lightbox er et webdesign verktøy som skaper en liten boks som viser innhold som bilder eller tekst i det som dukker opp i midten av skjermen når en kobling klikkes. Det finnes mange varianter av å skape et lysbord, og de fleste av dem krever at noen javascript brukes. Det er imidlertid en måte å lage en lysboks effekt på nettstedet ditt ved hjelp av kun HTML-kode.

Bruksanvisning

1 Åpne et tekstredigeringsprogram som Notisblokk eller TextEdit. Skriv inn i CSS-koden i overskriften delen av siden din. First type "<style type =" text / css ">" i HTML-siden. Følg dette med koden:

.black_overlay {

display: none;

position: absolute;

top: 0%;

venstre: 0%;

width: 100%;

height: 100%;

background-color: black;

z-index: 1001;

-moz-opacity: 0.8;

opacity: 0,80;

filter: alpha (opacity = 80);

}

.white_content {

display: none;

position: absolute;

top: 25%;

venstre: 25%;

width: 50%;

høyde: 50%;

padding: 16px;

border: 16px solid orange;

background-color: white;

z-index: 1002;

flow: auto;

}

Avslutt header med "</ style>"

2 Type "<div id =" light "class =" white_content "> Testing ... Teksting </ div> <div id =" fade "class =" black_overlay "> </ div>" i kroppen delen av nettstedet ditt. Dette vil definere innholdet du vil skal vises i Lightbox. Enhver html kan settes inn her.

3 Legg en "Close" -knappen din lightbox ved å skrive "<a href =" javascript: void (0) "onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>" innenfor innholdet i Lightbox.

4 Lag en lenke til Lightbox ved å skrive "<a href =" javascript: void (0) "onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click Her </a> "Erstatt" Klikk her "med teksten du ønsker for koblingen.

5 Lagre filen. Du har nå opprettet en Lightbox med bare HTML.

Hint

• Integrer lysbilde til en del av ditt nettsted. De er spesielt bra for å vise bilder eller videoer.