Modal box og modal image

Popup boxe i standardudgaven med JavaScript fungerer som sådan ret godt, men det grafiske udtryk er yderst begrænset i sine muligheder. Metoden med modal boxes og modal images er egentlig bare en lidt smart måde at kombinere et par DIV med lidt CSS og JavaScript, så det er mere et pillearbejde end teknisk svært eller avanceret.

HTML-delen af modal består af to kasser og en knap. Kasserne er en DIV til at styre baggrunden og en DIV inden i denne til at vise indhold. Knappen kan være en almindelig knap med BUTTON tag'en, den bruger vi i dette eksempel, men det kan lige så godt være et billede eller et link. Der skal blot være noget der udløser at DIV'erne bliver vist, dvs. et element til at klikke på eller en event i et script der kører automatisk, når siden vises.




Som kode ser det således ud:


Knappen til at lukke for modalen er her lavet som et kryds i øverste højre hjørne, hvilket er et af de standardtegn der er nedarvet fra Windows. Hvis man bedre kan lide en knap med OK, som ved en alert box, så laver man blot dette i stedet.

Hvis vi starter med den ydre kasse (det grønne område i figuren oven over), som er selve modalen, så skal den starte med at være usynlig, dvs. display skal være none.

For ikke at komme i karambolage med sidens øvrige indhold, skal den ligge i et andet lag, hvilket gøres med z-index.

For at give illusionen af en popup hvor sidens indhold træder i baggrunden og bliver inaktivt, også selv om brugeren scroller, laver vi en fixed position på DIV'en, giver den afstanden 0 fra top og venstre margin og giver dem højde og bredde på 100%.

Vil man sikre sig mod overflow ved små skærme, og det kan være en glimrende idé, man man sætte overflow til auto.

Baggrunden skal have en farve. Sort er den farve som mange godt kan lide, men det vælger man efter smag og sidens farve. At bruge sort på en sort eller meget mørk baggrund er f.eks. ikke hensigtsmæssig. For at få effekten af skygge i stedet for en massiv plade, bruger vi opacitet, her sat til 0.5, og ligesom farven, er det noget man justerer efter smag og hvad der er hensigtsmæssigt.

BEMÆRK: Hvis man bruger opacity:0.5 til at give opaciteten, får man problemer her. Opacity nedarves i elementerne og kan ikke overtrumfes, så hvis yderelementet har opacity:0.5, kan det indre element maksimalt have opacity:0.5. Den eneste måde at omgå dette på, er ved at anvende rgba-farver. Dette er rgb-farver med en alfakanal (den man også bruger til at lave usynlig baggrund på .gif- og .png-billeder med).

Så ser koden således ud:



Modalens indhold (den gule kasse i figuren oven over), dvs. det der popper op som et vindue med tekst og/eller billede, er en DIV med indhold som alle andre. Det eneste man lige skal være opmærksom på er placeringen, fordi baggrunden låser placeringen fast. I dette eksempel centrerer vi sideværs og har den øverste kant 20% fra vinduets top, men det kunne lige så godt være i bunden eller helt oppe i toppen. Men ellers er det bare at specificere en kant, baggrunds farve osv.

Her laver vi en, hvor ser koden således ud:



Det sidste der lige skal addreseres er krydset til at lukke vinduet. Her laver vi det gråt som default, og når musen holdes over, bliver det sort, og cursoren skifter til en hånd, der indikerer link.

Til dette ser koden således ud:



Så mangler vi kun JavaScriptet.

Når man kigger rundt på løsninger til modal boxes, får man et større JavaScript, med definition af variabler og function og meget andet. Ingen grund til at gøre det så kompliceret. Der er brug for to gange ONCLICK og getElementById().

Den første er knappen. Når den bliver klikket på, skal den DIV med ID'en Modal gøre synlig. Det ser således ud:


Det andet er krydset til luk, dvs. den SPAN med krydset i, hvor DIV'en med ID="Modal" gøre usynlig igen. Sådan her:


Og så er modal boxen klar.

Når det hele så er samlet, kommer det til at se således ud:

Nu har vi lavet en standardudgave af en modal box. Nu laver vi en der er mere pimped, som det hedder på moderne dansk.

Hvis man gerne vil se kildekoden, kan man det, men det er ikke så vigtigt, som det der sker. I forhold til standardkassen oven over, er der ændret flg.:

• Baggrundsfarven på den indre kasse er gjort klar
• Der er tilføjet en gif-animation med transparent baggrund
• Teksten er sat i en kasse med rundede hjørner, skæve vinkler og hvid baggrund
• Kassen med tekst har fået lidt blur-effekt med box-shadow i hvid
• Krydset til at lukke boxen har fået lidt neon-effekt med text-shadow i hvid

Hvilket giver:


Så længe man arbejder med DIV'er på denne måde, kan man lave et væld af effekter og lækre detaljer, og det er bare at prøve sig frem.