Popup maken met JavaScript

Eén van de meest gebruikte toepassingen van JavaScript is het maken van popups. Het verschil tussen een pop-up en een "gewoon" venster dat je via het target="blank" attribuut van een link of formulier kunt maken, is dat je veel meer contrôle hebt over een popup venster. Een venster dat door middel van target="_blank" wordt geopend heeft normaal gesproken dezelfde afmetingen en andere eigenschappen als het oorspronkelijke venster. Met een popup kun je de eigenschappen van het nieuwe venster voor een groot deel zelf bepalen.

In veel gevallen is het erg handig om deze venstereigenschappen te kunnen bepalen. Bijvoorbeeld als je plaatjes in een groter venster wilt laten zien. Het is dan meestal niet nodig om een volledig scherm te openen met alle browserfuncties. In zulke gevallen kun je dan een popup gebruiken.
In deze les leer je hoe je gemakkelijk zelf pop-ups kunt maken met JavaScript.

Voorbeeld

Eerst maar even een voorbeeld van zo'n pop-up scherm. Klik maar eens op de knop hieronder.

Je kunt hetzelfde bereiken met een gewone tekstlink.

Zoals je ziet wordt een nieuw scherm geopend met daarin een banner van MijnHomepage die netjes in het venster past. Ook wordt de status bar getoond (onderaan het scherm). De browsertoetsen (vorige, home, etc.) worden echter niet getoond. Ook kan bijvoorbeeld de grootte van het venster niet veranderd worden.

De code

De basiscode voor zo'n popup is:

<a href="URL" onclick="window.open('URL', 'venster_naam', 'venster_opties'); return false">linktekst</a>

Dit is de code voor een tekstlink. Voor een formulier gebruik je:

<form action="_self">
 <input type="button" value="Klik hier!" onclick="window.open('URL', 'venster_naam','venster_opties'); return false" />
</form>

Venster_naam vervang je door de unieke naam die je aan het venster wilt geven. Het maakt niet uit welke naam je hiervoor kiest. Bij URL zet je de URL naar de inhoud van het nieuwe venster. De venster_opties bespreek ik hieronder. Deze opties of attributen bepalen het de afmetingen en overige eigenschappen van het popup venster.

Je ziet, de basiscode voor de popup is erg simpel.

Attributen voor het popup venster

Er zijn negen belangrijke attributen die je kunt gebruiken voor het popup venster:

1. width de breedte van het venster wanneer het geopend wordt
2. height de hoogte van het venster wanneer het geopend wordt
3. location de adresbalk van het venster (waar de URL van de pagina altijd in staat)
4. status de statusbalk van het venster (staat bij IE standaard onderin het scherm)
5. menubar de menubalk van het venster
6. directories andere directory-knoppen van de browser
7. toolbar hier staan de verschillende knoppen op: vorige, home, print, etcetera
8. resizable geeft aan of de bezoeker de grootte van het venster mag aanpassen
9. scrollbars het venster krijgt schuifbalken als de inhoud groter is dan de vensterafmetingen

Deze attributen kunnen worden toegevoegd op de plek van venster_opties in de basiscode hierboven. De verschillende attributen moet je scheiden met een komma en voor het eerste attribuut en na het laatste plaats je een quote ('). Je plaatst verder een = teken na het attribuut dat je gaat gebruiken.

De attributen moet je, wanneer je ze gebruikt, ook een waarde meegeven. Voor width en height gebruik je een getal. Dit getal geeft dan respectievelijk de breedte en de hoogte aan van het venster in pixels. Voor de zeven andere attributen gebruik je yes of no. Je hoeft eigenlijk alleen yes te gebruiken, want de standaardwaarde is altijd no. Wil je dus bijvoorbeeld een venster zonder menubar, dan kun je gewoon het attribuut menubar weglaten uit de code.

Voorbeeldcode

Om een en ander te verduidelijken volgt hier als voorbeeld de volledige code van een tekstlink voor een popup met een breedte van 200, een hoogte van 100 en met schuifbalken, toolbar en adresbalk. De popup heeft dus geen statusbalk, menubalk, andere directory knoppen en de grootte is niet aan te passen door de bezoeker.

<a href="http://jewebsite.nl/bestandsnaam.html" onclick="window.open('http://jewebsite.nl/bestandsnaam.html','jevensternaam',
'width=200,height=100,scrollbars=yes,toolbar=yes,location=yes'); return false">De linktekst</a>

Het resultaat wordt dan als volgt:

De linktekst

Zoals je ziet veronderstelt de browser dat de attributen die niet werden toegevoegd aan de code (statusbar, menubar, resizable, etcetera) niet getoond moeten worden. De popup heeft daarom dus geen statusbalk, menubalk, enzovoort.

Door te experimenteren met de attributen kun je je popup er precies zo laten uitzien als jij het wilt.
Veel succes!

MijnHomepage Tip