Matthias Scharwies: Popup-Boxen

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

  1. 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

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    1. 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

      --
      Moskito, ergo summ.
      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      1. 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

      2. 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

        --
        Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
  2. 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.

    --
    "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
    1. 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

      1. 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.

        --
        "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
  3. 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

    1. 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

      1. 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.

        --
        “All right, then, I'll go to hell.” – Huck Finn
        1. 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.

          --
          "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
  4. 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.

    --
    “All right, then, I'll go to hell.” – Huck Finn
    1. 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

  5. Ich habe alle Erkenntnisse mal hier zusammengefasst:

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

    Vielen Dank Matthias