Ben's Hobbyhoekje -- Popup-melding met overlay over de pagina

Popup-melding met overlay over de pagina

Stel: je hebt een webwinkel. Op een zeker moment introduceer je een nieuwe productenlijn. Dat is groot nieuws voor de klanten van je winkel. Je zou ze eigenlijk wel willen dwingen om het bericht over de nieuwe producten te lezen!

Op deze pagina wordt een techniek besproken waarmee je dat kunt bereiken. De code van het voorbeeld kun je downloaden om zelf te gebruiken.

Het is belangrijk om je klanten niet te irriteren. Anders verlaten ze je site, en dat is niet de bedoeling.
Het bericht wordt éénmaal getoond en daarna een langere tijd niet meer. Dat geldt voor alle klanten, of ze het bericht willen lezen of niet.

Een uitgewerkt voorbeeld
Als je hier voor het eerst komt, wordt de pagina afgedekt door een grijze, transparante kleur. In het midden staat een melding. Daarin staan twee knoppen: 'Lees meer >' en 'Nee, dank u'.

Als je op 'Lees meer >' klikt, verschijnt er een bladzijde met extra informatie.
Als je op 'Nee, dank u' klikt, verdwijnt de melding.
Als je buiten de twee knoppen klikt gebeurt er niets. Je bent dus min of meer gedwongen een keus te maken: Meer lezen of niet.

Als je echter helemaal niet klikt, verdwijnen de melding en de grijze kleur vanzelf na ongeveer 15 seconden.

Het idee voor deze pagina is afgeleid van 'Lightbox', waarmee je foto's op je pagina kunt tonen.

De volgende onderwerpen komen aan bod:
1. De werking van het script
2. Inbouwen in je eigen site
3. Beperkingen en valkuilen
Het script werkt, zonder in detail te treden, als volgt:
- Allereerst wordt met behulp van JavaScript de cookie van de website opgehaald. Daarin staat een record met de naam SawMessage. Als die de waarde Yes heeft en de cookie is niet expired (verlopen), gebeurt er niets.
- In alle andere gevallen schrijft het JavaScript een tweetal <div>-tags in het document, nl. met id="OverlayDesktop" (voor de grijzeoverlay) respectievelijk id="OverlayMessage" (voor de mededeling). Zie ook het item HTML laten genereren door JavaScript.
- De mededeling zelf is een plaatje. Het .JPG-formaat is hier heel geschikt.
- De knoppen in het plaatje worden gemaakt met behulp van <map> en <area>. Deze tags worden 'hard' in de code gezet. Zie ook het item Meerdere links in één plaatje: <map>.
- Als er op een knop is geklikt wordt het record SawMessage in de cookie op Yes gezet. Tegelijk wordt het tijdstip ingesteld waarop de cookie verloopt, aan de hand van de (vooraf ingestelde) geldigheidsduur.
- De grijze afdekking (overlay) maakt toegang tot de pagina onmogelijk. De gebruiker moet reageren op de knoppen in de mededeling.
- Zodra de mededeling op het scherm staat begint er een klok te lopen. Deze laat de mededeling verdwijnen na een (vooraf ingestelde) tijd. In dit voorbeeld is dat 15 seconden. Als er vóór die tijd op een van de knoppen is geklikt wordt de klok gestopt. De mededeling verdwijnt dan.
- Als er niet op een knop is geklikt voor de wachttijd van 15 seconden voorbij is, wordt de cookie niet bijgewerkt. De volgende keer dat de bezoeker de op pagina komt, verschijnt de melding ook weer.

Inbouwen in je eigen website.

De code bestaat uit verschillende onderdelen:
1. JavaScript in de file overlaymessage.js.
2. CSS in de file overlaymessage.css.
3. HTML- en JavaScript in de <BODY> van je document.
4. Een plaatje voor de (grijze, transparante) overlay: overlay_back.jpg.
5. Een plaatje voor de mededeling: overlaymsg.jpg
(De plaatjes zijn verkleind weergegeven)
De beste werkvolgorde is:
1. Maak en test de webpagina met het volledige bericht, waarnaar verwezen wordt vanaf 'deze' pagina.
2. Maak met behulp van een programma voor beeldbewerking (Paint, Phototoshop, ...) een .jpg-plaatje aan (.GIF, .PNG, enz., kan natuurlijk ook). Dat bevat tenminste:
  - Een korte kernzin met het onderwerp van de mededeling.
  - Een knop om de aankondiging te lezen (Lees verder).
  - Een knop om de aankondiging niet te lezen (Nee, dank u).
3. Bepaal de afmetingen van het plaatje.
4. Bepaal de vorm en plaats van de knoppen. Het gaat om x-y-coördinaten ten opzichte van de linker bovenhoekvan het plaatje.
5. Wijzig de files overlaymessage.js en overlaymessage.css.
6. Codeer de <map>-tag in het document, zie het item Meerdere links in één plaatje: <map>.
7. Test het geheel in diverse browsers.
De files overlaymessage.js en overlaymessage.css link je vanuit de <HEAD>, zoals onderaan is aangegeven.
De mate van transparantie van de overlay geef je aan met de CSS-eigenschap opacity:.20;.
Opacity staat in de file overlay.css in het blok #OverlayDesktop.
De kleur van de overlay stel je in door overlay_back.jpg aan te passen. In het voorbeeld is dit een plaatje van 100 x 100 pixels. Het is ondoorzichtig zwart. Als je dit verandert in donkerblauw krijg je dus een blauwe overlay. De mate van transparantie bepaal je met eigenschap opacity (dichtheid, het tegenovergestelde van transparantie).
De 'ideale' instelling is een combinatie van de kleur en de transparantie. Met een beetje spelen is de beste combinatie eenvoudig te vinden.
De melding zelf moet je helemaal aanpassen aan je eigen smaak. Dat komt er dus op neer dat je de hele figuur opnieuw moet maken.

In overlaymessage.css stel je de afmetingen en de plaats van de melding op het scherm in. Die staan in het blok #OverlayMessage:

*Eigenschap:*	*Betekenis:*
width	Breedte van de melding (het plaatje). Hier: 290px.
height	Hoogte van de melding (het plaatje). Hier: 180px.
top	Plaats van de melding (het plaatje) in het document, gemeten vanaf de bovenkant. Hier: 200px.
left	Plaats van de melding (het plaatje) in het document, gemeten vanaf de linkerkant. Om de melding horizontaal gecentreerd op het scherm te krijgen bereken je left als volgt: left = ½(breedte document - breedte melding). Hier: ½(650 - 290) = 180px.

De overlay en de melding worden bovenop het document gelegd door de z-index van de blokken #OverlayDesktop en #OverlayMessage voldoende groot te maken. De waarden staan hier op 4500 resp. 5000. Dat is voor de meeste toepassingen voldoende. Mocht het gebeuren dat de overlay en/of melding niet volledig zichtbaar zijn, dan moeten de waarden van z-index worden verhoogd. Hierbij geldt:
- De z-index van het blok #OverlayDesktop moet groter zijn dan de z-index van alle andere elementen in het document.
- De z-index van het blok #OverlayMessage moet groter zijn dan de z-index van het blok #OverlayDesktop.

In de file overlaymessage.js moet een aantal variabelen worden ingesteld, zie de tabel hieronder:

*Variabele:*	*Betekenis:*
MsgPicture	Naam van het plaatje (met de melding), eventueel voorafgegaan door een relatief path. Hier: overlaymsg.jpg. Met een relatief path er bij wordt het bijvoorbeeld: ../images/overlaymsg.jpg
MsgTitle	'Title'-attribuut van de melding (het plaatje overlaymsg.jpg). Dit verschijnt als tooltip als je met de muis over de melding gaat.
MsgWidth	Breedte van het plaatje (pixels). Gebruik hiervoor de zelfde waarde als width in het CSS-blok #OverlayMessage. Hier: 290.
MsgHeight	Hoogte van het plaatje (pixels). Gebruik hiervoor de zelfde waarde als height in het CSS-blok #OverlayMessage. Hier: 290.
MsgUsemap	Je hebt tenminste twee knoppen nodig in het plaatje: Lees verder en Nee, dank u. De links zet je in <area>-tags, die je onderbrengt in een <MAP>-tag. MsgUsemap bevat de naam van die map. Zie ook het item Meerdere links in één plaatje: <map>.
OverlayDelay	De tijd (in seconden) die verloopt vóór dat de melding automatisch van het scherm verdwijnt. Hier: 15 sec. Als je wilt dat de melding oneindig lang blijft wachten tot een knop is aangeklikt, zet je hier nul of een negatief getal.
expDays, expHours, expMinutes	De tijd (Dagen, uren, Minuten) die verstrijkt voordat de melding weer wordt getoond als de gebruiker op een van de knoppen heeft geklikt. Voorbeelden: expDays = 1. De melding blijft 1 dag (= 24 uur) weg. expMinutes = 5. De melding blijft 5 minuten weg. Tip: Als je hiermee aan het ontwikkelen bent, kun je deze waarden het beste alle drie op nul zetten. De melding verschijnt dan altijd. Als je een waarde < 0 gebruikt, zet het script die waarde op nul. In dit voorbeeld blijft de melding 5 minuten weg na een klik.

Al deze dingen staan boven in de file. Verdere aanpassingen in overlaymessage.js zijn niet nodig.

Nadat de bestanden overlaymessage.css en overlaymessage.js zijn aangepast wordt het tijd de code in het document te plaatsen. Die zet je het beste direct na de <BODY>-tag. Deze code bestaat uit de aanroep van de JavaScript-function ShowOverlay en de definitie van de <MAP>.
De code van het voorbeeld staat onderaan de pagina.
De actie op de knoppen ligt vast in de <AREA>-tags. Daarvan zijn er (in dit voorbeeld) twee:
1. De knop Nee, dank u. Deze roept de function HideOverlayClick() aan. Dit moet je ongewijzigd laten.
2. De knop Lees meer >. Deze roept de function VisitPage(pagename) aan. Voor de parameter pagename vul je de URL van de pagina in die je bezoekers voorgeschoteld krijgen als ze op Lees meer > hebben geklikt. In het voorbeeld is pagename gelijk aan 'html299a.htm'. Maar je kunt er ook een relatief of absoluut path in kwijt, bijvoorbeeld '../abcd/belangrijk.htm',
  of 'http://www.andere-website.nl'.

Beperkingen en valkuilen.

Als de function VisitPage() verwijst naar de pagina waarin de knop 'Lees meer >' staat, kom je in een eindloze lus terecht. Je bezoekers kunnen dat doorbreken door op 'Nee, dank u' te klikken, maar velen zullen dat niet in de gaten hebben. Die verlaten dus je site. En omdat ze nu een minder prettige ervaring met je site beleven, is de kans aanwezig dat ze weggaan en niet meer terug komen.
Bij bezoekers aan je site die cookies hebben uitgeschakeld kan niet worden onthouden of er op een knop is geklikt of niet. Het gevolg is dat ze elke keer dat ze de pagina bezoeken de melding gepresenteerd krijgen. Daar kun je verder niets aan doen.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code ziet er als volgt uit:

(Zet dit in de <HEAD>).

<link rel="stylesheet" href="overlaymessage.css">
<script src="overlaymessage.js"></script>

N.B.: De eerste implementatie deze code was in een engelstalige website. Daarom is het commentaar in de JavaScript-code in het Engels.

(Zet dit in de <BODY>, bij voorkeur helemaal aan het begin).

<script>ShowOverlay()</script>
<map name="OverlayMsgMap">
<area shape="rect" coords="178,137,265,157" title="Nee, dank u" href="javascript:HideOverlayClick()">
<area shape="rect" coords=" 27,137,115,157" title="Lees meer..." href="javascript:VisitPage('html299a.htm')">
</map>

Downloaden:

Druk op de knop: File: voorb299.zip, 14 274 bytes.