Avatar billede palito Nybegynder
18. oktober 2007 - 17:46 Der er 7 kommentarer

"Popup"-boks

Hvordan laver man de javascript-popupbokse der ses på mange sider, hvor det egentlig ikke er et egentligt vindue der åbner, men blot et <div> element med position:absolute;, og så bliver baggrunden(den egentlige side) lidt nedtonet.
Avatar billede w13 Novice
18. oktober 2007 - 17:51 #1
Tænker du til billedvisning? Mange bruger den populære "lightbox": http://www.huddletogether.com/projects/lightbox/
Avatar billede palito Nybegynder
18. oktober 2007 - 18:15 #2
w13 - nej :) men ligesom når man åbner billederne med lightbox. jeg ved i hvert fald, at jeg har set google bruge det.
Avatar billede w13 Novice
18. oktober 2007 - 18:21 #3
Hvis du går ned under modifications er der andre versioner, som bl.a. kan vise andet indhold end billeder også.
Avatar billede jgivoni Nybegynder
19. oktober 2007 - 09:04 #4
Man laver to lag, der dækker hele viewporten (width+height: 100%; overflow: auto);
1) Den alm. front-end
2) Et semitransperant lag der ligger ovenpå, men starter med display: none

Når der skal poppes op sættes display: block på lag 2 (man kan evt. toggle dette med en javascript addClass funktion), samtidig med at en div skabes og lægges ovenpå med position: absolute osv.

Det kræver lidt snedig programmering i javascript og css, så jeg håber du er velbevandret indenfor disse teknologier :-)
Avatar billede w13 Novice
19. oktober 2007 - 19:06 #5
Jeg sidder faktisk selv og laver hjemmelavet lightbox for tiden.
Oplevede lidt problemer med gennemsigtigheden, der varierer fra browser til browser.
Opacity kan sættes således i forhold til forskellige browsere:
IE: style.filter="alpha(opacity=50)";
FF: style.MozOpacity=0.5;
Safari: style.opacity=0.5;
Opera: style.Opacity=0.5;
Avatar billede w13 Novice
19. oktober 2007 - 19:07 #6
IE gælder også Netscape, Seamonkey, mf.
Avatar billede w13 Novice
22. november 2007 - 19:50 #7
Finder du ud af noget?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester