HTML - Popup link / venster maken


Het maken van een popup om bepaalde content (een andere pagina) te laten zien kan op de onderstaande manier middels een eenvoudig stukje code. Om een popup te maken kan de code die hieronder staat simpelweg toe worden gevoegd aan een normale link.

onclick="window.open('http://www.websonic.nl','WebSonic', 'width=400,height=425,scrollbars=no,toolbar=no,location=no'); return false"


Toegevoegd aan een link ziet dit er als volgt uit.

<a href="http://www.websonic.nl" onclick="window.open('http://www.websonic.nl','WebSonic', 'width=400,height=425,scrollbars=no,toolbar=no,location=no'); return false">Linknaam</a>


In de code bepaal je vervolgens wat de afmeting is van het venster door de waardes te wijzigen achter Width voor de breedte en achter Height voor de hoogte. Daarnaast kun je bepalen of het venster schuifbalken mag hebben door 'scrollbars=no' te wijzigen in yes.

Het adres van de pagina die geopend moet worden op de plek van http://www.websonic.nl.

Voorbeeld Popup

Button

Je kunt eventueel ook een button maken op een vergelijkbare manier om een popup venster te openen. Deze button kun je bijvoorbeeld gebruiken binnen een formulier. Het plaatsen van de code gaat op dezelfde manier zoals in onderstaand voorbeeld.

<input type="button" value="Versturen" onclick="window.open('http://www.websonic.nl','WebSonic', 'width=400,height=425,scrollbars=no,toolbar=no,location=no'); return false" />


Afsluitknop

Het kan handig zijn om in een popup een knop toe te voegen om de popup snel te kunnen sluiten. Het sluiten van een geopende popup kan met de onderstaande link.

<a href="javascript:top.window.close()">Sluit venster</a>