Zadejte hledaný výraz...

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

gore.m
verified
rating uzivatele
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
23. 9. 2018 11:03:04
https://webtrh.cz/diskuse/co-zpusobuje-konflikt-dvou-pop-up-oken-na-stejne-strance/#reply1366660
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
verified
rating uzivatele
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
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
verified
rating uzivatele
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
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
verified
rating uzivatele
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
"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
verified
rating uzivatele
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
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
verified
rating uzivatele
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