Popup-Boxen

[Matthias Scharwies]

Hallo,

Popups werden von den Browsern im Allgemeinen ja blockiert.

*Welche Alternativen gibt es?

** Wie lautet der Fachbegriff /alternative Begriff zu "dokumentinterne Dialogfenster"? Habt ihr da evtl. ein Beispiel/ Link?

** Würdet ihr das dialog-Element schon nutzen?
***Gibt es dafür Alternativen?

Vielen Dank im Voraus!
Matthias

[ChrisB]

Hi,

Popups werden von den Browsern im Allgemeinen ja blockiert.

Ja, allerdings etwas differenzierter als einfach „alle“.

Per Benutzerinteraktion (bspw. einen Klick) ausgelöste Popups werden überlicherweise erlaubt (das ist sowas wie der Default); automatisch ausgelöste hingegen blockiert.

** Wie lautet der Fachbegriff /alternative Begriff zu "dokumentinterne Dialogfenster"? Habt ihr da evtl. ein Beispiel/ Link?

Modaler Dialog oder auch Overlay.
Blockiert idR. weitere Interaktion mit der dahinter liegenden Seite, und blendet sie auch visuell mehr oder weniger stark aus.

** Würdet ihr das dialog-Element schon nutzen?
***Gibt es dafür Alternativen?

Kommt drauf an™.
Per Polyfill lässt es sich in Browsern nachrüsten, die es noch nicht nativ unterstützen.

MfG ChrisB

[Der Martin]

Hallo,

Popups werden von den Browsern im Allgemeinen ja blockiert.
Ja, allerdings etwas differenzierter als einfach „alle“.
Per Benutzerinteraktion (bspw. einen Klick) ausgelöste Popups werden überlicherweise erlaubt (das ist sowas wie der Default); automatisch ausgelöste hingegen blockiert.

genau, und das führt den Sinn eines Popup-Blockers ad absurdum, denn nahezu alle Popups werden ja unwissentlich durch Interaktion, meist einen Klick, ausgelöst. Ich kann mich nicht erinnern, dass der Popup-Blocker mal einfach so "aus heiterem Himmel" gemeldet hat, dass er ein Popup blockiert hätte. Auch Popups, die direkt beim Seitenaufruf erscheinen sollen, werden oft nicht blockiert, wenn sie noch in die 1-Sekunden-Frist nach dem Klick fallen, der das Laden der Seite ausgelöst hat.

** Wie lautet der Fachbegriff /alternative Begriff zu "dokumentinterne Dialogfenster"? Habt ihr da evtl. ein Beispiel/ Link?
Modaler Dialog oder auch Overlay.

Gelegentlich auch "Inline-Popup".

Ciao,
 Martin

[Matthias Scharwies]

vielen Dank für die schnelle Hilfe!

Wie lautet der Fachbegriff "dokumentinterne Dialogfenster"?
Modaler Dialog oder auch Overlay.
Gelegentlich auch "Inline-Popup".

Wollte grad fragen, was "layer based popup window" auf deutsch heißt. :-)

Nochmals vielen Dank!

Matthias

[ChrisB]

Hi,

Per Benutzerinteraktion (bspw. einen Klick) ausgelöste Popups werden überlicherweise erlaubt (das ist sowas wie der Default); automatisch ausgelöste hingegen blockiert.

genau, und das führt den Sinn eines Popup-Blockers ad absurdum, denn nahezu alle Popups werden ja unwissentlich durch Interaktion, meist einen Klick, ausgelöst.

Inzwischen versuchen das die Werbefuzzis natürlich, weil Popup-Blocker ihren automatischen Popup weitgehend das Wasser abgegraben haben.
Hier obliegt es dann dem Nutzer, den Blocker spezifischer zu konfigurieren (bspw. nur für solche Seiten Klick-Popups freizugeben, die damit keinen Unsinn anstellen).

Ich kann mich nicht erinnern, dass der Popup-Blocker mal einfach so "aus heiterem Himmel" gemeldet hat, dass er ein Popup blockiert hätte.

Wie gesagt, die gibt es ja auch nicht mehr so häufig.

MfG ChrisB

[Felix Riesterer]

Lieber Matthias Scharwies,

wenn Du den Einsatzzweck genauer definieren könntest, dann wäre zu Deiner sehr allgemein gehaltenen Aussage besser einzugehen.

Overlays werden gerne für diese nervigen Werbeflächen verwendet, die die Seite unbrauchbar machen. Gerne wird eine "schließen"-Schaltfläche angeboten, auf deren Klick hin sich natürlich mindestens ein weiteres Browserfenster/-tab öffnet. Aus dieser Erfahrung heraus empfehlen sich solche Lösungen nur sehr bedingt.

Modale Fenster sind kaum besser, da auch sie die Seite vorübergehend unbenutzbar machen, jedoch führen sie zu einer kalkulierbaren Reaktion des Browsers. Jedoch können solche modalen Fenster über Overlays simuliert werden - mit den oben beschriebenen Effekten.

Die <dialog>-Sache... erscheint mir nur eine weitere Spielvariante der beiden oben beschriebenen Möglichkeiten zu sein. Dass man diese auch zu ungewollten Werbe-Popups (lies: neue Fenster/Tabs) missbrauchen kann, möchte ich doch stark annehmen.

Also, was möchtest Du genau erreichen? Eine Art Rückfrage wie window.confirm oder window.alert? Da finde ich, dass man am besten ein Overlay benutzt, dass sich ausschließich auf den Seitenbereich beschränkt, für den es bedeutsam ist.

Liebe Grüße,

Felix Riesterer.

[Matthias Scharwies]

Vielen Dank für eure Rückmeldungen

wenn Du den Einsatzzweck genauer definieren könntest, dann wäre zu Deiner sehr allgemein gehaltenen Aussage besser einzugehen.

keinen spezifischen Zweck, sondern einfach Material sammeln für einen Grundlagenartikel im Wiki:
http://wiki.selfhtml.org/wiki/JavaScript/Objekte/window

Zusätzlich zu den Beispielen von window.open /focus und window.close wollte ich Alternativen vorstellen.

Nächste Woche stell ich dann ein einfaches InlinePopup mit
popUp.style.visibility = "visible"; (oder besser className?) vor. Im Anschluss verlink ich auf Dein http://www.felix-riesterer.de/main/seiten/inlinepopup.html.

Ein Beispiel für dialog wäre auch nicht schlecht, aber alles der Reihe nach.

Liebe Grüße Matthias

[Felix Riesterer]

Lieber Matthias Scharwies,

Im Anschluss verlink ich auf Dein http://www.felix-riesterer.de/main/seiten/inlinepopup.html.

vielen Dank für diese Ehre... aber das InlinePopup ist sehr in die Jahre gekommen. Dafür kommt es allerdings ohne zusätzliche Bibliothek wie z.B. jQuery aus.

Aktuellere und visuell ansprechendere Beispiele für so ein Inline-Popup sind diese hier:
* Fancybox
* Bumpbox

Liebe Grüße,

Felix Riesterer.

[JürgenB]

Hallo Matthias,

Popups werden von den Browsern im Allgemeinen ja blockiert.

*Welche Alternativen gibt es?

so mache ich es zur Zeit:

http://www.j-berkemeier.de/ShowGPX.html

Auf die blauen Knöpfe klicken oder warten.

Gruß, Jürgen

[Matthias Scharwies]

http://www.j-berkemeier.de/ShowGPX.html

Vielen Dank,

das werde ich so übernehmen:

Dein document.getElementById('beschreibung').className='overlay' ist viel eleganter als popUp.style.visibility = "visible";

Liebe Grüße
Matthias

[1UnitedPower]

Hakuna matata!

Dein document.getElementById('beschreibung').className='overlay' ist viel eleganter als popUp.style.visibility = "visible";

Es geht noch eleganter:
document.getElementById('beschreibung').classList.add('overlay');

oder, je nach Anwendungsfall:
document.getElementById('beschreibung').classList.toggle('overlay');

Das hat den Vorteil, das zuvor gesetzte Klassen unberührt bleiben.

[Felix Riesterer]

Lieber 1UnitedPower,

das Objekt <node>.classList gibt es im IE erst ab Version 10. (CanIUse) Wer jQuery einsetzt, kann es auch mit $("#beschreibung").addClass("overlay") umsetzen.

Liebe Grüße,

Felix Riesterer.

[1UnitedPower]

Hakuna matata!

** Würdet ihr das dialog-Element schon nutzen?

Unbedingt, aus mehreren Gründen:

<dialog> ist das semantisch passende Element, das macht den Quelltext besonders ausdrucksstark und leserlich – für Menschen, wie für Maschinen.

Weiterhin hat das <dialog>-Element implizite ARIA-Rollen und -Zustände. Assistive Software sucht nach solchen Zusatzinformationen, um seinen Anwendern die best mögliche Darstellung anzubieten.

JavaScript-Lösungen von Drittanbietern werden meistens für bestimmte Bibliotheken, wie jQuery oder AngularJS geschrieben. Das hat den Nachteil, dass die Lösungen in anderen Umgebungen nicht wiederverwendbar sind. Eine AngularJS-Komponente kann nicht ohne weiteres in EmberJS eingebettet werden. <dialog> allerdings gehört zum Standard-Umfang des DOM. Jedes clientseitige JavaScript-Framework ist damit verträglich und bietet eine Schnittstelle an, um DOM-APIs zu konsumieren.

Die mangelnde Browser-Unterstützung sollte kein Hindernis sein. Mit einem Polyfill lässt sich das Verhalten für alle relevanten Browser nachrüsten.

***Gibt es dafür Alternativen?

Es gibt Leute, die basteln reine CSS-Lösungen für modale Dialoge, die ohne JavaScript auskommen. Ich sehe das ganze eher als proof-of-concept oder als nettes Fallback für den Fall, das kein JavaScript aktiviert ist. Die Nachteile von reinen CSS-Lösungen sind eben mangelnde Flexibilität und vor allem mangelhafte Zugänglichkeit.

[Matthias Scharwies]

Hakuna matata!

Hallo, 1UnitedPower

Würdet ihr das dialog-Element schon nutzen?

Unbedingt
<dialog> ist das semantisch passende Element, das macht den Quelltext besonders ausdrucksstark und leserlich – für Menschen, wie für Maschinen.

Du hast den Wiki-Artikel zu dialog doch geschrieben. Hättest du Lust ein funktionsfähiges Beispiel zu erstellen?

Wenn ja, melde Dich doch mal!

Liebe Grüße Matthias

[Matthias Scharwies]

Ich habe alle Erkenntnisse mal hier zusammengefasst:

http://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/element/className#Inline-Popup

Vielen Dank Matthias