Neues Fenster öffnen - Popup definieren

Manchmal kann es ganz praktisch sein, durch Klick auf einen Link die Zielseite in einem kleineren Fenster ohne Tool- und Navigationsbars zu öffnen. Diese Fenster sind auch unter dem Namen Popups bekannt.

Das ganze lässt sich mit HTML und Java Script umsetzen und ist auch nicht sonderlich schwer.

Neues Fenster mit window.open() definieren

Folgendermaßen soll das Popup dann aussehen: Demolink

Hierzu benötigen wir folgenden Code:

<a href="#" onClick="window.open('http://www.l-design.at/kontakt.html', 'Kontaktformular', 'width=500,height=600,scrollbars=no,resizeable=yes,status=yes');">Demolink</a>

 

Es ist gleich die Besonderheit des Links zu erkennen und zwar enthält der Link den JavaScript Event-Handler onClick. Der Link selber verweist mit dem Attribut href nur auf # (ist also nicht definiert), da die Zielseite durch die Funktion window.open angegeben wird.
Die Funktion open ermöglicht die Definition der Merkmale des neuen Fensters - wie z.B. Höhe, Breite und ob das neue Fenster eine Statuszeile und eine Bildlaufleiste hat oder nicht.

 

Somit werden in window.open() folgende Argumente angegeben (muss in dieser Reihenfolge passieren!)

  • die URL der Datei, welche im neuen Fenster angezeigt werden soll (http://www.l-design.at/kontakt.html)
  • den Namen des neuen Fensters (Kontaktformular)
  • die Fenstermerkmale (width=500,height=600,scrollbars=no,resizeable=yes,status=yes)

Jeder dieser Werte muss in Anführungszeichten stehen und mit Beistrich getrennt werden.
{googleAds}
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2717861494506240";
/* Links - content */
google_ad_slot = "6814663901";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
{/googleAds}

!Wichtig!
Die Zeichenkette mit den Fenstermerkmalen darf keine Leerzeichen noch Zeilenumbrüche enthalten - muss also in einem durchgeschrieben werden!

Merkmale, welche mit window.open() defniert werden können:

Name Wert Beschreibung
width Zahl Breite des neuen Fensters
height Zahl Höhe des neuen Fensters
toolbar yes/no Standard-Symbolleiste des Browsers ein oder ausblenden
menubar yes/no Anwendungsmenüs am oberen Rand des neuen Fensters ein oder ausblenden
status  yes/no Statuszeile am unteren Rand des neuen Fensters ein oder ausblenden
scrollbars yes/no Bildlaufleisten ein oder ausblenden
resizeable yes/no Bestimmt ob der User die Größe des Fensters ändern kann

 

Fenster mit einem Link schließen

{googleAds}
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2717861494506240";
/* Links - content */
google_ad_slot = "6814663901";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
{/googleAds}

Möchte man in diesem Popup einen Link einbauen um dieses wieder zu schließen, kann man das mit folgendem Code einfach bewerkstelligen:

<a href="javascript:window.close();">Fenster schließen</a>