JEN TENTO TÝDEN: Každému Webtržníkovi 1 000 Kč na publikaci článků a napsání textů s garancí 5 000 Kč na PlaCla.cz
Zobrazují se odpovědi 1 až 11 z 11

Co způsobuje konflikt(?) dvou POP-UP oken na stejné stránce?

  1. Zdravím,

    udělal jsem jednoduché pop-up okno založené na add/remove class. Vše fungovalo OK dokud jsem to same pop-up okno nepoužil s mousemove znovu s odlišným id.
    Problém je v tom, že pop-up okno odpálené mousemove nejde zavírat (ani jednou z deklarovaných funkcí).
    Kde udělali soudruzi chybu?
    Díky

    CODEPEN DEMO

    Kód:
    // Pop-up
    if (document.querySelector(".fl-pop-up")) {
      window.addEventListener("load", function() {
        var btn = document.getElementById("btn_fl-pop-up");
        var modal = document.getElementById("fl-pop-up__init");
    
        // Open if exist
        if (btn) {
          btn.onclick = function() {
            modal.classList.add("fl-pop-up__active");
          };
        }
        
        var modal__overlay = document.querySelector(".fl-pop-up__overlay");
        var close = document.querySelector(".fl-pop-up__overlay--close");
    
        // Close on close click
        close.onclick = function() {
            modal__overlay.classList.remove("fl-pop-up__active");
        };
        // Close on window click
        window.onclick = function(event) {
          if (event.target == modal__overlay) {
            modal__overlay.classList.remove("fl-pop-up__active");
          }
        };
        // Close on ESC
        document.onkeydown = function(evt) {
          evt = evt || window.event;
          if (evt.keyCode == 27) {
            modal__overlay.classList.remove("fl-pop-up__active");
          }
        };
      });
    }
    
    // Abandoning visitor
    var mouseX = 0;
    var mouseY = 0;
    var popupCounter = 0;
    
    document.addEventListener("mousemove", function(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;
      
      var modal = document.getElementById("fl-pop-up__ab");
      
      if (mouseY < 50) {
        if (popupCounter < 1) {
          modal.classList.add("fl-pop-up__active");
        }
        popupCounter++;
      }
    });

  2. Co se právě děje na Webtrhu?
  3. Ten event přiřazený close tlačítku vám nefunguje, protože jej přiřazujete pouze prvnímu elementu (document.querySelector vrací pouze první výskyt) s danou třídou, nikoliv elementům všem. Bugů tam s tímto bude více, ale toto je hlavní myšlenka chyby myslím, jenom letmo jsem to shlédl.

  4. Díky za odpověd, to jsem si myslel celou dobu, zkoušel jsem proto:

    var modal__overlay = document.querySelectorAll(".fl-pop-up__overlay");
    var close = document.querySelectorAll(".fl-pop-up__overlay--close");
    Ale tím přestalo fungovat zavírání u obou a úplně
    Kód:
    Cannot read property 'remove' of undefined
    . Je potřeba použít jiný způsob?

  5. Tím, že si jenom upravíte ty selektory docílíte jenom toho, že v těch proměnných máte nyní kolekci elementů - nyní pokud chcete přiřadit listener, respektive přidat/odebrat třídu, musíte každému zvlášť.

  6. Díky, zkusil jsem... nějak se nedaří :-(

    Verze 1:
    Kód:
     close.addEventListener("click", function(){
       modal__overlay.classList.remove("fl-pop-up__active");
    });
    Výsledek: close.addEventListener is not a function

    Verze 2:
    Kód:
    close.addEventListener("click", myFunction);
    
    function myFunction() {
        modal__overlay.classList.remove("fl-pop-up__active");
    }
    Výsledek: close.addEventListener is not a function

    Verze 3:
    Kód:
    for(var i=0; i < close.length; i++){
      close[i].addEventListener('click', function () {        
        modal__overlay.classList.remove("fl-pop-up__active");
       }, false);
    }
    Výsledek: pro jistotu nefunguje vůbec

    Javascript teprve zkoumám a více méně zatím lepím dohromady co kde najdu, mohl bych poprosit o příklad (zdá se, že je to nad moje síly :-( ) ?
    Díky

  7. Ta třetí verze je správně (iterujete nějakým způsobem přes všechny položky), ovšem nefunguje vám to, protože opět 'modal__overlay' je kolekce elementů a jak jsem již říkal, pokud chcete manipulovat s třídami, musíte u každé položky kolekce zvlášť. Navíc na klik libovolného tlačítka by jistě nemělo moc smysl zavírat všechny popupy, tak nějak vyřešte to, aby se zavíral jen ten, který opravdu chcete zavřít.

    Možná bude lepší si přečíst dokumentaci, namísto slepého ctrl+c a ctrl+v z výsledků Google. Časová investice se vám jistě vrátí.

  8. pokud chcete manipulovat s třídami, musíte u každé položky kolekce zvlášť.
    Tady se ztrácím, protože fl-pop-up__active je jedna třída z kolekce. Chápu li to správně?


    Navíc na klik libovolného tlačítka by jistě nemělo moc smysl zavírat všechny popupy, tak nějak vyřešte to, aby se zavíral jen ten, který opravdu chcete zavřít.
    Takže třeba (fl-pop-up__init je id pop-upu)?:
    var modal__overlay = document.querySelectorAll("fl-pop-up__init .fl-pop-up__overlay");
    var close = document.querySelectorAll("fl-pop-up__init .fl-pop-up__overlay--close");

    Přemýšlím, jestli by tedy ve finále nebylo lepší kompletní pop-up zduplikovat a dát jim odlišná id a selektory?

    Možná bude lepší si přečíst dokumentaci, namísto slepého ctrl+c a ctrl+v z výsledků Google. Časová investice se vám jistě vrátí.
    Určitě! Pracuju na tom, ale ono to nikdy není jen o ctrl+c a ctrl+v člověk se tímhle způsobem taky učí.

  9. "Tady se ztrácím, protože fl-pop-up__active je jedna třída z kolekce. Chápu li to správně?"
    To mi nedává smysl.

    Kód:
    for(var i=0; i < close.length; i++){
      close[i].addEventListener('click', function () {        
        modal__overlay.classList.remove("fl-pop-up__active");
       }, false);
    }
    'modal__overlay' je kolekce elementů (NodeList). classList je členem jednotlivých elementů, ne celé kolekce (mělo by vás to vracet error: "Cannot read property 'remove' of undefined").

    Kód:
    var modal__overlay = document.querySelectorAll("fl-pop-up__init .fl-pop-up__overlay");
    Toto (a podobné) by vám nevybralo nic, ID se v kontextu selektorů v DOM píší takto: "#fl-pop-up__init". Ve vašem případě by to hledalo element <fl-pop-up__init> , který nemůže existovat.

    "Přemýšlím, jestli by tedy ve finále nebylo lepší kompletní pop-up zduplikovat a dát jim odlišná id a selektory?"
    A pro každý nový popup tohle dělat znovu? To by bylo úsměvné.

  10. Díky za trpělivost!
    Zkouknul jsem 5 hodinový JS tutorial, takže jsem o něco chytřejší, ne že by to něčemu pomohlo .-) Mám pocit, že se motám stále v kruhu:

    1/ Musím vybrat všechny elementy, takže u "close" a "modal__overlay" querySelectorAll ?
    2/ Musím loopnout všechny "close" aby se event netýkal pouze prvního "close"?
    3/ Musím vyselektovat "onclick" pro každý popup+modal__overlay zvlášt?

    Kód:
        var close = document.querySelectorAll(".fl-pop-up__overlay--close"); 
        var modal__overlay1 = document.querySelectorAll("#fl-pop-up__init .fl-pop-up__overlay");
        var modal__overlay2 = document.querySelectorAll("#fl-pop-up__ab .fl-pop-up__overlay");
    
    
        // Close on close click
        for(var i=0; i < close.length; i++){
      close[i].addEventListener('click', function (event) {        
       
        if (event.target == modal__overlay1) {
        modal__overlay1.classList.remove("fl-pop-up__active");
        }
        else if (event.target == modal__overlay2) {
        modal__overlay2.classList.remove("fl-pop-up__active");
        }
      }, false);
    }
    Nefunguje (Chrome neukazuje žádnou chybu).

  11. 1) Tak asi chceš vybrat všechna tlačítka na zavření, aby fungovala, jinak ti budou zavírat popupy jenom některá. To, že chceš vybrat všechny popupy, když už to vypadá, že jsi jim dal zvlášť ID (které má být na stránce unikátní pro jeden element), nedává smysl.
    2) Všem tlačítkům musíš přiřadit listenery, jinak některá nebudou zavírat...
    3) nerozumím

    Přepíšu česky a polopatě co jsi napsal (za cenu drobných nepřesností), snad uvidíš kde to nedává smysl:

    Kód:
    CLOSE přiřaď všechny elementy splňující selektor '.fl-pop-up__overlay--close', nebo-li tlačítka pro zavírání
    MODAL__OVERLAY1 přiřad všechny elementy splňující selektor '#fl-pop-up__init .fl-pop-up__overlay'
    MODAL__OVERLAY2 přiřad všechny elementy splňující selektor '#fl-pop-up__ab .fl-pop-up__overlay'
    
    Všem prvkům CLOSE nastav funkci ZAVŘI na stisknutí myši.
    
    ZAVŘI: {
      Podívej se, kam v prvku CLOSE uživatel kliknul:
      - kliknul do MODAL__OVERLAY1 (což je kolekce prvků, která nemá žádnou klikatelnou reprezentaci na obrazovce a tudíž do ní nikdy nikdo nemůže kliknout) -> odeber MODAL__OVERLAY1 třídu "fl-pop-up__active" (což viz předchozí bod, je blbost)
      - druhý IF to samé
    }
    2 Příklady, které si můžeš na svoje popupy nasadit:

    Více dynamické, se selektorem popupu zvlášť
    JS Bin - Collaborative JavaScript Debugging

    Méně dynamické, bez selektoru popupu zvlášť
    JS Bin - Collaborative JavaScript Debugging

    JS Kód je ES6, více kompatibilní a pro tebe možná snadnější na pochopení bude, když si to přeformátuješ zde: https://babeljs.io/repl , funkčně bude kód ekvivalentní

  12. Ty příklady jsou super! Konečně mi to dává smysl.
    Dík moc .-)

Hostujeme u Server powered by TELE3