barrierefreies Webdesign Ingo Turski

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:

• Meist steht nicht der gesamte Bildschirm zur Verfügung, z.B. durch immer sichtbare Elemente wie die Windows-Taskleiste.
• Ist das zu öffnende Fenster größer als der zur Verfügung stehende Anzeigebereich, sollte man seine Größe entsprechend reduzieren - besonders wenn keine Möglichkeit zur Größenänderung und Scrollbalken angeboten werden.
• Beim Aufruf sollte immer eine HTML-Alternative für Benutzer ohne Javascript (auch für Suchmaschinen) angeboten werden.

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 < document.body.clientWidth || h < window.innerHeight) {
    x = (document.body.clientWidth - w) / 2;
    y = (window.innerHeight - h) / 2;
    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.