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

23. 9. 2018 11:03:04

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

// 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;

23. 9. 2018 11:03:04

https://webtrh.cz/diskuse/co-zpusobuje-konflikt-dvou-pop-up-oken-na-stejne-strance#reply1366660

Miroslav Foltyn

(3 hodnocení)

23. 9. 2018 13:02:54

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.

23. 9. 2018 13:02:54

https://webtrh.cz/diskuse/co-zpusobuje-konflikt-dvou-pop-up-oken-na-stejne-strance#reply1366659

gore.m

23. 9. 2018 13:24:31

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ě . Je potřeba použít jiný způsob?

23. 9. 2018 13:24:31

https://webtrh.cz/diskuse/co-zpusobuje-konflikt-dvou-pop-up-oken-na-stejne-strance#reply1366658

Miroslav Foltyn

(3 hodnocení)

23. 9. 2018 13:31:56

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ášť.

23. 9. 2018 13:31:56

https://webtrh.cz/diskuse/co-zpusobuje-konflikt-dvou-pop-up-oken-na-stejne-strance#reply1366657

gore.m

23. 9. 2018 14:32:45

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

Verze 1:

Výsledek: close.addEventListener is not a function

Verze 2:

Výsledek: close.addEventListener is not a function

Verze 3:

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

23. 9. 2018 14:32:45

https://webtrh.cz/diskuse/co-zpusobuje-konflikt-dvou-pop-up-oken-na-stejne-strance#reply1366656

Miroslav Foltyn

(3 hodnocení)

23. 9. 2018 14:40:41

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

23. 9. 2018 14:40:41

https://webtrh.cz/diskuse/co-zpusobuje-konflikt-dvou-pop-up-oken-na-stejne-strance#reply1366655

gore.m

23. 9. 2018 14:58:11

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čí.

23. 9. 2018 14:58:11

https://webtrh.cz/diskuse/co-zpusobuje-konflikt-dvou-pop-up-oken-na-stejne-strance#reply1366654

Miroslav Foltyn

(3 hodnocení)

23. 9. 2018 15:25:16

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

'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").

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 , 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é.

23. 9. 2018 15:25:16

https://webtrh.cz/diskuse/co-zpusobuje-konflikt-dvou-pop-up-oken-na-stejne-strance#reply1366653

gore.m

26. 9. 2018 08:38:14

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?

Nefunguje (Chrome neukazuje žádnou chybu).

26. 9. 2018 08:38:14

https://webtrh.cz/diskuse/co-zpusobuje-konflikt-dvou-pop-up-oken-na-stejne-strance#reply1366652

Miroslav Foltyn

(3 hodnocení)

26. 9. 2018 17:46:23

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:

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í

26. 9. 2018 17:46:23

https://webtrh.cz/diskuse/co-zpusobuje-konflikt-dvou-pop-up-oken-na-stejne-strance#reply1366651

gore.m

26. 9. 2018 18:47:54

Ty příklady jsou super! Konečně mi to dává smysl.

Dík moc .-)

26. 9. 2018 18:47:54

https://webtrh.cz/diskuse/co-zpusobuje-konflikt-dvou-pop-up-oken-na-stejne-strance#reply1366650

Pro odpověď se přihlašte.

Přihlásit