Popups fast nur mit HTML

Die einzig zuverlässige Methode in HTML, eine Seite in einem neuen Fenster anzuzeigen, ist das target Attribut innerhalb des Link-Elements <a> zu verwenden. So zum Beispiel:
<a> href="popup-beispiel.html" target="keinpopup" >
wird dann als Kein PopUp angezeigt. Bei einem Klick auf dem Link öffnet sich dann ein neues Fenster oder Tab; aber eben noch kein PopUp, da es ja noch reines HTML ist.
Gibt es bereits ein Fenster mit diesem Namen, wird dessen Inhalt überschrieben, ansonsten (und bei Angabe von target="_blank") öffnete der Browser ein neues.

Anmerkung: aus Gründen der Übersichtlichkeit wird bei den Beispielen das abschließende </a> Tag immer weggelassen. Im richtigem HTML Markup darf es natürlich nicht fehlen.

Weiter geht's: mit ein wenig JavaScript innerhalb des <a> Tags kommt ein echtes Popup zustande: Echtes PopUp, da der Browser den onClick-Event vor dem Laden des Links verarbeitet. Statt nur open kann auch window.open verwendet werden, und das Schlüsselwort javascript: ist optinal (seine eleminierung ändert aber nichts daran, das es JS Code ist).

<a href="popup-beispiel.html" target="popup-beispiel" onClick="javascript:open('', 'popup-beispiel', 'height=400,width=400,resizable=no')">

Achtung: der Code muss ohne Zeilenumbruch (Leerzeichen sind ok) hintereinander weggeschrieben werden, sonst kann es eine Fehlermeldung geben oder einfach gar nicht funktionieren.

Javasript muss natürlich im Browser notwendig aktiviert sein, sonst war's das mit dem Popup und die Seite wird wie ein normaler Link in einem eigenen Fenster oder Tab (im Microsoft Jargon: Registerkarte) geöffnet.
Der Clou ist, das die sonst für JS notwendige Angabe im Markup fehlen kann.

<script type="text/javascript"> ... </script>

Suchmaschinen können solchen Links problemlos folgen, allerdings ist diese Art ein PopUp zu gestalten nicht mehr zeitgemäß und sollte die Ausnahme bleiben (auch unter dem Design-Aspekt: „mobile first“)!

Die einzelnen Eigenschaften sind optional (Zu Demo Zwecken wurde resizable aufgenommen). Bei etlichen von ihnen wie resizable können die Sicherheitseinstellungen der Browser die Ausführung solcher Anweisungen verhindern. Ein Grund mehr PopUps nicht einzusetzen ;-)!

onclick= … window.open …
dies ist die Anweisung ein neues Fenster zu öffnen
width
Breite des Popupfensters in Pixel (gruselig)
height
Höhe des Popupfensters in Pixel (gruselig)
scrollbars
Die Werte sind yes bzw. no oder 0 bzw 1 für anzeigen / ausblenden - Nur IE, Firefox & Opera (Bildlaufleisten die (bei Bedarf?) am rechten und unteren Fensterrand angezeigt werden)
toolbar
Die Werte sind yes bzw. no oder 0 bzw 1 für „Standardschaltflächen“ anzeigen / ausblenden - Nur IE und Firefox
status
Die Werte sind yes bzw. no oder 0 bzw 1 für „Statusleisten“ anzeigen / ausblenden (die Statusleiste befindet sich am unteren Rand des Browsers und zeigt den Verlauf des Ladevorgangs an oder bei überfahren eines Links mit der Maus, dessen Zieladresse. Bei manchen Browsern dynamisch aus / eingeblendet.)
resizable
Die Werte sind yes bzw. no oder 0 bzw 1 steuert ob die Größe des Fensters durch den Anwender mit der Maus verändert werden kann
menubar
Die Werte sind yes bzw. no oder 0 bzw 1 für „Menüleiste“ anzeigen / ausblenden (die Leiste mit den Auswahlen Datei, Bearbeiten, Ansicht, Chronik, Lesezeichen, etc. — ist heutzutage meist nicht mehr vorhanden)
fullscreen
Die Werte sind yes bzw. no oder 0 bzw 1 für „Vollbildmodus“ - Nur IE
location
Die Werte sind yes bzw. no oder 0 bzw 1 für „Adresszeile“ anzeigen / ausblenden - Nur Opera (Eingabezeile in der die URL eingegeben wird)
top
Abstand des Popupfensters vom oberen Rand in Pixel (gruselig)
left
Abstand des Popupfensters vom linken Rand in Pixel (gruselig)
directories
Obsolet (veraltet)

Popup-Fenster

Böse Popups - Gute Popups

Vor einigen Jahren gab es viele Webseiten, die gar nicht genug PopUps anbieten konnten. Auch heute gibt es noch Internetauftritte die einen zur Begrüßung erst einmal mit einem Popup-Gewitter empfangen. Etliche neue Fenster öffnen sich ungefragt und werben für eBay & Co. oder wollen dazu verleiten, einen Newsletter zu abonnieren, ein E-Book herunter zu laden oder sonst irgendwie den Besucher zur Herausgabe der E-Mail-Adresse zu bewegen. Bei jedem Seitenwechsel oder erneutem Laden der Seite geht der Trubel wieder von vorne los. Das sind die bösen Popups - besser kann man die Mißachtung seiner Besucher und ein gescheitertes Geschäfts-Modell nicht demonstrieren.

Doch nicht alle Popups sind dumm. Manchmal kann es sinnvoll sein, mit Hilfe von JavaScript zusätzliche Informationen in einem kleinen neuen Fenster anzubieten. Bildergalerien, wo erst ein Klick auf ein Thumbnail das Bild in voller Größe präsentiert, sind dafür ein Beispiel. Manche Webseiten liefern zusätzliche Informationen oder Hilfestellungen in sinnvollen Popup-Fenstern (Thumbnails mit Screenshots öffen sich als PopUp und zeigen das Bild in voller Größe). Gute Popups haben auf jeden Fall eines gemeinsam: sie öffnen sich nur auf ausdrücklichen Klick des Besuchers, niemals ungefragt.

Diese Website verwendet keine PopUps. Und, von zwei Demo-Seiten abgesehen, auch kein JavaScript. Es ist in Zeiten von mobilen Endgeräten auch mehr als fragwürdig, diese Technik überhaupt noch einzusetzen. Auch nicht in ihrer modernen Inkarnation als Layer oder Lightbox.
Es mag aber Anwendugsfälle geben, in denen ein PopUp nötig ist. Dafür gibt es im folgenden eine Anleitung, die Schritt für Schritt die notwendigen Befehle erkärt.
Mit reinem HTML (oder bei abgeschaltetem JavaScript) funktionieren Popups nie.

Popup-Blocker als sinnvolle Waffe gegen die Quälgeister

Alle modernem Browser wie Mozilla, Firefox und Opera und inzwsichen auch der Internetexplorer, haben den Wunsch der Surfer angenommen und intelligente Popup-Blocker eingebaut. Man kann relativ detailliert angeben, was man sehen will, etwa selbst angeforderte Fenster, und wovon man verschont bleiben will. Doch gegen die Layer -und Lightbox-Technik, sind diese Popup-Blocker machtlos, und der einzige handhabbare Weg, ihnen denoch den Graus zu machen ist das Addon NoScript.

Popups richtg gestalten mit JavaScript

Die folgenden Tipps gelten natürlich nur für sinnvolle Popups, die sich auf ausdrücklichen Klick der Besucher öffnen. Für ungefragte neue Fenster sind sie nicht geeignet. Wer will (oder die folgenden Informationen nicht versteht), kann sich das nötige JavaScript als Template popupwindow.js.txt (und was pasiert wohl, wenn Sie den Link anklicken?) herunterladen und beliebig verwenden. Es eignet sich für Bilder, Textdateien und auch für ganze HTML-Seiten, ist einfach anzuwenden, deckt mögliche Fehlerquellen ab und funktioniert in allen Browsern.

  • Informationen aus Popup-Fenstern müssen immer auch bei abgeschaltetem JavaScript zugänglich sein. In vielen Firmen und Internet-Cafés ist diese Option aus Gründen der Sicherheit deaktiviert. Darum darf man Popups nicht aufrufen via
    <a href="javascript:popup(..)"> oder <a href="#" onclick="popup(..)">
    sondern sollte immer als Alternative den Popup-Inhalt im href angeben:
    <a href="html-oder.jpg" onclick="popup('html-oder.jpg',..)">
    Benutzer ohne Javascript bekommen dann ebenfalls alles zu sehen, allerdings nicht in einem Popup sondern im Hauptfenster.
  • OnClick-Ereignisse bei Links müssen immer ein return false zurück liefern, sonst wird die im href angegebene Seite zusätzlich aufgerufen. Bei Einsatz von Popup-Blockern kann das aber dazu führen, dass weder das Popup erscheint noch die Information im Hauptfenster dargestellt wird, da das return false ja durchgelassen wird. Darum darf dieses nicht im onClick erscheinen
    <a href="html.jpg" onclick="popup('html.jpg',...);return false">
    sondern sollte im Erfolgsfall als Rückgabewert der Popup-Funktion im Script definiert und im HTML-Code weiter gereicht werden:
    <a href="html.jpg" onclick="return popup('html.jpg',...)">
    Die Popup-Funktion im JavaScript überprüft dann, ob das Popup wirklich geöffnet wird. Im Erfolgsfall wird ein false und sonst ein true zurück gegeben:
    function popup(url,...) {
      ok = window.open(url,...)
      if (ok) return false;
      else return true;
    }

    Nur wenn das Popup abgeblockt, also nicht erstellt wurde, wird der href-Teil des HTML-Aufrufs verwendet und der Popup-Inhalt im Browser-Hauptfenster geöffnet.
  • Popups sollten automatisch wieder geschlossen werden, wenn die Webseite verlassen oder ein neues Popup aufgerufen wird. Das Script popupwindow.js hat dafür eine Funktion popdown(), die sowohl in popup(...) als auch bei onUnload und onFocus aufgerufen wird. Sie wirkt sich nur auf ein geöffnete Popup aus, nicht auf das Browser-Hauptfenster. Wem es nicht gefällt, dass das Fenster auch dann beendet wird, wenn die Hauptseite erneut angeklickt (fokussiert) wird, muss die letzte Zeile im Script löschen oder auskommentieren.
  • Der Besucher muss informiert werden, wenn ein Klick ein neues Fenster oder Popup öffnet. Das ist eine Grundforderung von Usibility und Zugänglichkeit für alle. Dieses kann entweder durch ein kleines Symbol vor dem Link verdeutlicht werden oder duch die Benutzung des title-Attributs im Link: <a href="..." onclick="..." title="Großbild im Popup-Fenster"> Am Besten ist es natürlich, beide Hinweise zu kombinieren.
  • Popups müssen besucherfreundlich sein. Wie oft hat man nicht schon erlebt, dass die aufpoppenden Fenster zu klein sind für den Inhalt und sich auch nicht vergrößern lassen? Dabei gibt es überhaupt keinen Grund (außer der Faulheit des Seitengestalters) die Größenänderung zu unterbinden, da sie keine Auswirkungen aufs Design hat. Allerdings muss man diese Eigenschaft explizit im Popup-Aufruf angeben:
    function popup(url,...) {
      args = 'width=123,height=345,resizable';
      ok = window.open(url,'',args)
      if ...
    }

    In manchen Fällen, besonders wenn das Popup einen längeren Text zum Inhalt hat, ist es sinnvoll, ihm auch Scrollbars zu geben. Denn man weiss ja nie, welche Browsereinstellungen der Besucher hat, etwa hinsichtlich der Textgröße und der verwendeten Fonts.
      args = 'width=123,height=345,resizable,scrollbars';
    In diesem Fall muss man dem Fenster allerdings in Breite und Höhe jeweils 20 Pixel mehr geben, denn Scrollbars nehmen jedenfalls im Internet Explorer auch dann Platz ein, wenn sie nicht sichtbar sind.
  • Schließlich sollten Popups auch designerfreundlich, ihr Aufruf also einfach sein. Das Script tut dieses in dreifacher Weise. Zu einen braucht die im href aufgerufene Seite nicht erneut angegeben zu werden, wenn man das this-Argument verwendet. Das erleichtert auch den Einsatz in Scripten und CMS-Templates. Weiterhin kann man bei Bildern die reale Bildgröße angeben, denn das Script erweitert die Breite automatisch um 20 Pixel und die Höhe um 25 Pixel, was bei allen gängigen Browsern eine ziemlich genaue Zentrierung im Popup bewirkt, da die Fenster als Standard einen Rand haben. (Bei Scrollbars muss man jeweils noch 20 Pixel hinzu geben). Und drittens kann man, wenn die Popups eine festgelegte Göße haben sollen, ganz auf Breiten- und Höhenangaben verzichten. Die genaue Umsetzung ist meinem Script popupwindow.js zu entnehmen. Der Aufruf ist damit folgender:
    <a href="html.jpg" onclick="return popup(this,123,345)" title="...">
    oder, wenn das Popup die im Script angegebene Standardgröße haben soll:
    <a href="html.jpg" onclick="return popup(this)" title="...">
    Einfacher gehts nicht.

Hier ist noch eine Seite, die keine Popups verwendet, obwohl sich einige Tabellen und Screenshots dazu anbieten würden: Sehr übersichtliche