Popup automatisch ausblenden

  • Hallo Leute,

    wenn ein User einen Artikel durch Anklicken in den Warenkorb legt, soll ein kleines Popup Fenster mit einer Meldung "vorgemerkt" aufgehen, das nach etwa 2 Sek automatisch geschlossen wird, am Besten wäre ein Ausblenden. Wie kann man sowas realisieren?

    LG

  • basti: Kann man ein JS alert schliessen, wenn es einen Click auf Ok verlangt?


    Ich habs jetzt so gelöst, damit das Popup auch animiert verschwindet:

    Beim #popup hab ich noch diverse Gestaltungen (border, shadow, color, position, etc).

    Beim setTimeout sind die sec nicht 2000 sondern 1900 damit das div nicht nochmals kurz angezeigt wird, bevor es dann mit display: none unsichtbar wird.


    Ich weiß nicht ob das elegant ist oder noch besser geht, aber es funktioniert.

  • Wenn Du "$("#div1").delay(2000).fadeOut(1000);" schreibst, verschwindet das Popup in meinem Beispiel auch animiert. Und ein Problem mit einer kurzen Anzeige vorm Verschwinden gibt es dabei nicht.

  • Wenn Du "$("#div1").delay(2000).fadeOut(1000);" schreibst, verschwindet das Popup in meinem Beispiel auch animiert. Und ein Problem mit einer kurzen Anzeige vorm Verschwinden gibt es dabei nicht.

    Richtig. Dafür muss man aber jQuery einbinden und wenn das einer nicht hat oder will, funktioniert es halt nicht.

    Falls alles ohne jQuery lief, macht es auch nicht Sinn für eine Spalte Javascript Code, jQuery einzubinden (bis 80KB sinnloser Code für eine Zeile JS die 80 kbits groß ist)


    Mein Vorschlag wäre es mit einer Klasse zu machen

    https://basti1012.bplaced.net/…?ordner=html-seminar&id=1

  • Nein, natürlich muss man jQuery nicht benutzen. Ich bin halt daran gewöhnt, weil ich seit Jahren nur mit Bootstrap unterwegs bin, wo jQuery Standard ist. Aber natürlich bietet CSS3 auch interessante Möglichkeiten.

  • Wenn ich das Popup per Click einblende soll es 2sec stehenbleiben und dann langsam verschwinden:

    Eingeblendet wird es durch die Änderung von display: block, aber es bleibt dann stehen und verschwindet nicht.

    Woran liegt das?

  • Versuch es mal mit remove.

    Code
    function showPopup() {  popup=document.querySelectorAll(".popup")[0];
      popup.classList.add('show');
        setTimeout(function(){ 
           popup.classList.remove('show');
            popup.classList.add('weg');
        }, 1900);
    }
    showPopup()

    Ich weiß gerade nicht was du mit transform: translate(-50%,-100vh); erreichen willst?

    Soll der popup nach oben rausfahren?


    Das hatte ich die Tage schon mal gehabt und so gemacht

    https://basti1012.bplaced.net/…?ordner=html-seminar&id=1

  • Wenn ich remove einfüge, dann verschwindet das Popup nach 1.9 sec blitzschnell, es soll aber langsam ausblenden. Deinen Code habe ich als Basis genommen, der transform ist von dir, ich kann ihn aber auch abändern, sodaß das Popup langsam durchsichtig wird.


    Das Problem dabei ist aber, dass das Popup bei deinem Code von Anfang an angezeigt wird, es soll aber zuerst versteckt sein und erst bei einem Click aufscheinen, 2 sec stehenbleiben und dann wegblenden.


    Mein Code vom Freiteag 7.5. funktioniert ja, wollte nur wissen ob es noch eleganter geht.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!