Popup-Fenster 2

Nun brauchen wir eine Funktion, welche wir an beliebiger Stelle aufrufen können, damit das neue Fenster erzeugt wird. Was soll denn das Fenster zeigen? Hier als Beispiel möchte ich, dass dort nur Bilder gezeigt werden, sozusagen ein extra Fenster zur Vergrößerung.

<script type="text/javascript">
   function bildPopup(url, width, height) {
      optionen = "width=" + width + ","
      + "height=" + height + ","
      + "location=no, menubar=no,"
      + "scrollbars=no, status=no, toolbar=no";

      window.open(url,"Bildanzeige",optionen);
   }
</script>

Wir benötigen für solch ein Bild-Popup nur drei Angaben, die Zieladresse, die Breite und die Höhe des Fensters. Alle Leisten vom Browser werden ausgeschaltet, da wir nur ein Bild zeigen wollen, und der Besucher nicht mit dem Fenster arbeiten soll.

Popup starten

Damit der Nutzer das Popup starten kann, benötigen wir einen Knopf oder Link. Die kann mit der HTML-Option "onclick" an jedem HTML-Element angehangen werden.

<a href="#"
onclick="bildPopup("http://www.google.de/",600,600);">
   Link
</a>

Innerhalb von "onclick" können JavaScript-Befehle eingesetzt werden, welche dann, wenn auf das Element geklickt wird, ausgeführt werden. In unserem Fall unsere Funktion, welcher wir auch die drei Informationen geben müssen (url, breite, höhe).

Wie gesagt, funktioniert das auch bei anderen HTML-Befehlen, zum Beispiel an einem Bild.

<img src="kleinesBild.jpg" width="100" height="100"
onclick="bildPopup("grossesBild.jpg",600,600);" />

Wenn der Besucher nun auf das Bild klickt, wird das Popup gestartet.

Fenster schließen

Wie zum Öffnen gibt es auch zum Schließen eine Javascript-Funktion.

window.close();

Dies kann ebenso durch "onclick" gestartet werden, zum Beispiel direkt an das Bild, welches im Popup-Fenster gezeigt wird. Somit würde das Fenster wieder geschlossen werden, wenn der Nutzer auf das Bild klickt.

Tips

Wenn wie in unserem Beispiel ein Bild im Popup gezeigt werden soll, bietet es sich an, dass dafür auch eine HTML-Seite erstellt wird, in welcher dann der Seitenabstand des Dokuments auf 0 gesetzt wird, damit das Bild keinen Leerraum darum hat. Damit kann dann auch das Popup-Fenster genau die Größe des Bildes haben.

Popup-Blocker verhindern üblicherweise nur Popups die automatisch geöffnet werden sollen, also ohne zutun des Nutzers. Da der Besucher aber klícken muss, wird dieses Popup zugelassen.