barrierefreies Webdesign Ingo Turski

zum Inhalt

Ingo

Tips und Tricks:PopUp über JavaScript zentriert öffnen

Der Einsatz von PopUps ist umstritten, zumal immer mehr Besucher wegen unerwünschter Werbeeinblendungen PopUps durch ihren Browser blockieren lassen oder sie zumindest wegklicken, ohne den Inhalt zur Kenntnis zu nehmen. Man sollte daher davon absehen, PopUps 'onload' zu öffnen, besonders dann, wenn diese wichtige Informationen enthalten.
Die externen Seiten, auf die ich innerhalb meiner Texte verweise, öffne ich im PopUp, weil davon auszugehen ist, daß der Besucher meinen Text später weiterlesen will und er leider meist erwartet, daß die Seite in einem neuen Fenster geöffnet wird, was über das target-Attribut in XHTML Strict nicht mehr zulässig ist.

Ein PopUp mit einer bestimmten Größe wird vorzugsweise am Bildschirm zentriert. Viele im Netz hierzu kursierende Scripts lassen jedoch einige Faktoren unberücksichtigt:

Die folgende Funktion berücksichtigt diese Punkte beim Öffnen eines Fensters mit der übergebenen Weite und Höhe:

<script type="text/javascript">
// <![CDATA[
function PopUp(w,h,ziel) {
  var x=0, y=0, parameter="";
  if (w < window.innerWidth || h < window.innerHeight) {
    x = (window.innerWidth - w) / 2;
    y = (window.innerHeight - h) / 2;
    if (window.opera) y = 0; // Opera positioniert unter den Symbolleisten
    if (x<0 || y<0) { x=0; y=0; }
    else parameter = "width=" + w + ",height=" + h + ",";
  }
  parameter += "left=" + x + ",top=" + y;
  parameter += ",menubar=yes,location=yes,toolbar=no,status=no";
  parameter += ",resizable=yes,scrollbars=yes";
  var Fenster = window.open(ziel,"PopUp",parameter);
  if (Fenster) Fenster.focus();
  return !Fenster;
}
// ]]>
</script>

Um auch eine HTML-Alternative anzubieten, wird die Funktion wie folgt aufgerufen:

<a href="popup.html" onclick="return PopUp(788,516,this.href)"> Demo </a>

Hier ist neben einem normalen HTML-Link der Event-Handler für den Funktionsaufruf angegeben. Sofern das PopUp geöffnet werden konnte, verhindert der negierte Rückgabewert false, daß die Seite erneut über den Link aufgerufen wird; wenn das PopUp geblockt wurde oder JavaScript deaktiviert ist, wird dem HTML-Link gefolgt.