JavaScript/Anwendung und Praxis/Popup-Boxen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das windows-Objekt und seine Methoden wurden früher zur Erzeugung weiterer Fenster gebraucht. Diese nannte man Popup-Boxen, wenn sie vor dem aktuellen Fenster erschienen, bzw. Popunder, die sich unsichtbar hinter dem Fenster befanden.[1]


Inhaltsverzeichnis

[Bearbeiten] Nachteile

Die Darstellung heutiger Browser hat sich gegenüber der Anfangszeit des Internets stark verändert. Anstelle einer Vielzahl von offenen Fenstern werden verschiedene Seiten innerhalb eines Fensters als Registerkarten (Tabs) angezeigt. Diese Tabs haben immer die Größe des Browserfensters. Deshalb ist das klassische Popup mit vom Seitenautor festgelegter Größe, Position und Leistenkonfiguration mit tabbed browsing und dem Konzept moderner Browser nicht vereinbar.

Popup-Boxen hatten eine feste Größe, die unabhängig vom verfügbaren Viewport war und widersprechen so dem Konzept des responsiven Designs. [2]

Im heutigen Web soll der Benutzer selber entscheiden, ob er Links im selben Tab, in einem neuen Tab oder einem neuen Fenster öffnet. Wenn er im selben Tab bleibt, ist der Zurück-Button die bequemste Möglichkeit zu einer Seite zurückzukehren. Mehrere offene Fenster und Popup-Boxen verhindern dieses intuitive Bedienkonzept.

Heutzutage unterbinden moderne Browser oft das Öffnen neuer Fenster und machen so den Einsatz von Popups obsolet. Es gibt jedoch einige Alternativen, die ohne die Nachteile mehrerer Fenster auskommen.

[Bearbeiten] Alternativen

Heutzutage werden Popups oft nicht mehr als neues Fenster, sondern als dokumentinterne Dialogfenster realisiert. Sie bleiben Bestandteil der Seite. Um eine Benutzerinterkation zu betonen, öffnet sich ein modaler Dialog als Overlay in einer Ebene (layer), die über dem normalen Inhalt liegt. Dies blockiert in der Regel weitere Interaktion mit der dahinter liegenden Seite, und blendet sie auch visuell mehr oder weniger stark aus.


[Bearbeiten] Inline-Popups

Dies kann man mit einem einfachen JavaScript-Script erreichen, das mithilfe von className ein Inline-Popup im aktuellen Fenster öffnet. Durch einen Klick auf den Schließen-Button verschwindet es wieder.

Mit Lightbox-Scripten können Sie beliebige Inhalte in einer Ebene (layer) darstellen, die über dem normalen Inhalt liegt. Die eigentliche Seite wird ausgegraut. Sobald Sie durch einen Klick auf die eigentliche Seite oder einen Schließen-Button zum Hauptinhalt zurückkehren, wird der zusätzliche Layer wieder ausgeblendet. Auf ein neues Browserfenster wird gänzlich verzichtet.


[Bearbeiten] Dialog-Box

Mit dem Dialog-Element können sie mit wenig HTML-Markup eine Dialog-Box anlegen, die per JavaScript oder CSS ein- und ausgeblendet werden kann.

[Bearbeiten] Nachladen von Inhalten

Ajax (Asynchronus JavaScript and Xml) ist ein Konzept, das es Webanwendungen ermöglicht, Daten zum und vom Server zu übertragen, ohne dass die Seite als Ganzes neu geladen wird.

Mit dem HTML5 template-Element können Sie noch nicht benötigte Teile der Seite bereits beim ersten Übertragen mitsenden und später aktivieren.


[Bearbeiten] Quellen

  1. http://molily.de/javascript-popups#nachteile
  2. http://forum.de.selfhtml.org/archiv/2005/12/t119707/#m768289

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML