Hvordan lage Lightbox vises over andre elementer

March 5

En lysbilde er en jQuery plugin som brukes til å overlappe bilder eller gallerier på en webside, og det er også kjent som et modalt vindu. Pre-laget Lightbox skript inkluderer vanligvis en stil-ark som definerer hvordan lysbilde vises. Som standard er lysbilde programmert til å vises over alt annet innhold på en nettside, men i noen tilfeller kan et element nekte å samarbeide. Dette er et vanlig problem med Flash-elementer eller bilde glidere. I hvilken rekkefølge elementene er lagdelt styres gjennom "z-index" eiendom i CSS stil-ark.

Bruksanvisning

1 Kontroller at lysbord plugin du har valgt er riktig installert. En link til den stilarket bør være til stede i hodet på siden din og se omtrent slik ut:

2 Åpne stil-ark som inneholder lysbilde stiler. Finn den primære velger som styrer lysbilde vinduet og bakgrunnen overlegg. Når det gjelder den opprinnelige jQuery lysbord plugin, er velgere som heter "# jquery-overlay" og "# jquery-lightbox." En "z-index" eiendom bør eksistere i begge erklæringene. For eksempel er jQuery Lightbox vinduet satt til en verdi av "100":

jquery-lysbilde {

position: absolute;

top: 0;

venstre: 0;

width: 100%;

z-index: 100;

text-align: center;

line-height: 0;

}

3 Endre "z-index" verdien til "8999" for overlegg og "9999" for vinduet. Disse uvanlig høye tall bør garantere lysbord er plassert over alle andre elementer.

4 Bruk Opera eller installere Firebug tillegget for Firefox fra det offisielle add-on katalogen. Høyreklikk på overlappende element, og velg deretter "Inspiser Element". Et vindu vil vises som viser deg HTML-koden og CSS stil knyttet til element for å hjelpe deg å avgjøre hvilken fil stilene er i, samt hvilken klasse brukes til å kontrollere elementet. Hvis du arbeider med en WordPress plugin eller CMS tema som inkluderer en lysboks, kan lysbilde CSS inngå som en del av temaet CSS.

5 Last ned og åpne filen som inneholder problemet elementets CSS stil. Hvis dette elementet er en del av en plugin eller tema som du ikke ønsker å endre direkte, kan du kopiere stilen til nettstedets stil-ark. Endre "z-index" egenskapen til et lavere tall enn 9998, og legge til "! Viktig" til linjen for å fortelle leseren til å gi denne erklæringen forrang. For eksempel:

.adbox {

z-index: 500 viktig;

}

Hint

Bytt flash elementer, som glidere og annonseblokker, med jQuery eller HTML5 kolleger for å unngå overlapping eller merkelig oppførsel. Bruke samme script type for alle dine interaktive elementer sikrer også bedre kompatibilitet og brukervennlighet.
Bruk alltid jQuery plugins med den samme versjonen avhengighet eller ingen avhengighet for å unngå konflikter.