| Autor | Zpráva | ||
|---|---|---|---|
| Mirtosqol Profil |
#1 · Zasláno: 30. 1. 2016, 20:44:25
Dobrý den,
potřeboval bych poradit jak udělat vyskakovací okno pro přihlášení jaké mají na stránce ( www.be2.cz ) v pravém horním okraji. Je tvořený přes popup box, ale netuším jak jej složit tak, aby mi to fungovalo jak v tom odkaze na be2. Děkuji za případnou pomoc. |
||
| RastyAmateur Profil |
Mirtosqol:
Nedavno jsem to rešil. Musím uznat, že na tvé živé úkázce to mají řešené jinak a lépe, ale stejně uvedu svůj postup. Jde o to, že při kliku na tlačítko vytvoříš nějaké pozadí, já vytvořil například <div style="position: fixed; top: 0px; left: 0px; background-color: black; opacity: 0.5;">, přičemž jsem tomu nastavil šířku a výšku stejnou, jako má okno. Pak už jen stačí stejným způsobem (position: fixed) nastavit pozici a celkově styl toho okénka a jeho obsah.
Mělo to jedinou chybu, kterou jsem dokázal jen částěčně eliminovat. Šlo rolovat - a tam dole / nahoře už to černé průsvitné pozadí nebylo. Když nastavíš overflow-y: hidden;, tak se to vyřeší, ale jen částečně. Skryje se rolovací lišta napravo, tím pádem se web roztáhne (v případě, že máš šířku v %) a posune (margin: auto;). Je to malý detail. Tento nedokonalý postup tu uvádím proto, že zatím nikdo neodpověděl. Doufám, že jsem tě alespoň trochu inspiroval a že to nějak využiješ. Tady jsem na rychlo udělal živou ukázku, jak jsem to myslel. Není tam ten overflow, takže to má pár much, ale princip zůstává stejný :-) |
||
| Chamurappi Profil |
#3 · Zasláno: 30. 1. 2016, 23:36:32
Reaguji na Mirtosqola:
Z jakého důvodu je nutné, aby za přihlašovacím boxem byl stále viditelný (ale nepříliš čitelný) obsah? Máš snad na stránce příliš málo místa, že potřebuješ vrstvit věci přes sebe? Pokud uživatel klikne na přihlášení omylem a bude se chtít vrátit zpět, napadne ho hledat křížek, nebo zmáčknout prohlížečové Zpět? Co udělá escape? Zresetuje formulář nebo zavře popup? Já bych se řešení z be2.cz spíš snažil vyhnout, u přihlašování je použitelnost důležitější než efektnost. Reaguji na RastyAmateura: Když jsem se na odkázanou ukázku podíval prohlížečem, v němž jsfiddle.net funguje (byť s děsivým kerningem), zaujalo mě, že nastavuješ té překryvné vrstvě rozměry vypočítané ze současné výšky okna. Proč? Ono ti 100% v CSS nefunguje? Nebo vynulování right a bottom? A pozici toho boxu také zbytečně počítáš skriptem…
Což takhle si vystačit s onclick="box.className = 'třída'" a zbytek nechat celý na CSS?
„Šlo rolovat - a tam dole / nahoře už to černé průsvitné pozadí nebylo.“ Při fixním pozicování? Nevěřím. Vypínat posuvník, to mi přijde divné. |
||
| RastyAmateur Profil |
#4 · Zasláno: 30. 1. 2016, 23:49:16
Chamurappi:
„Při fixním pozicování? Nevěřím.“ Já u sebe aktuálně nemám ten projekt, ve kterém jsem to zkoušel, mrknu na to zítra, ale když nad tím tak přemýšlím, asi máš pravdu. Mám posit, že jsem to nejdříve dělal s position: absolute, a v tom případě mi to nešlo, a pak jsem právě tam naházel fixed, ale už jsem to neupravoval. Nejsem si jistý.. „Ono ti 100% v CSS nefunguje?“
Funguje, jen mě to v tu chvíli nenapadlo :) „A pozici toho boxu také zbytečně počítáš skriptem…“ Jak jinak tedy zarovnat box horizontálně na střed? |
||
| Mirtosqol Profil |
#5 · Zasláno: 31. 1. 2016, 01:37:12
Chamurappi
Pokud uživatel klikne na přihlášení omylem a bude se chtít vrátit zpět, napadne ho hledat křížek, Možná jsi to omylem přehlédl, ale oni tam právě takový křížek jako pojistku mají. Ohledně toho proč to takhle dělám- ano je to právě kvůli té efektivitě, pokud bys mi s tím nějak poradit, byl bych velmi rád. RastyAmateur Když použiji tvou metodu, tak se mi to okno dostane do popředí jen přes určité vrstvy. Když sjedu na stránce dolů např. na jquery script pro změnu obrázků popřípadě nějaké menu, dostane se mi okno do pozadí a nejde přes daný objekt vidět, netušíš jak to vyřešit? |
||
| jakre Profil |
#6 · Zasláno: 31. 1. 2016, 02:59:24
|
||
| Chamurappi Profil |
#7 · Zasláno: 31. 1. 2016, 04:33:33
Reaguji na RastyAmateura:
„Jak jinak tedy zarovnat box horizontálně na střed?“ Je spousta možností, bylo by rychlejší hledat, než se zeptat. Zkusil jsem si to vyrobit také, téměř bez JS. Použil jsem místo tlačítka odkaz, abych uživatele nepřipravil o možnost rozkliknout si přihlašovací stránku do nového tabu (což vyžaduje, aby existovala i samostatná přihlašovací stránka) a aby se mohl přihlásit i uživatel bez funkčního JS. Reaguji na Mirtosqola: „Možná jsi to omylem přehlédl, ale oni tam právě takový křížek jako pojistku mají.“ Však já přesně o tom křížku mluvím. Část lidí klikne na něj, část zmáčkne prohlížečové Zpět, kterým odejde pryč. Prohlížeče (a i celé mobilní systémy) nabízejí univerzální cestu zpět, ale ta na stránce be2.cz nefunguje podle předpokladů. „ano je to právě kvůli té efektivitě“ Já mluvil o efektnosti, ne o efektivitě. Efektivita ti může klesnout kvůli horší použitelnosti. Modální dialog (tzn. okno, jehož otevření vyřadí všechny ostatní možnosti) se hodí tam, kde potřebuješ, aby uživatelova pozornost neodbíhala pryč – typicky v okamžiku, kdy něco chceš ty po něm, ne on po tobě. Říkáš tím „tohle musíš vyplnit, jinak to nepůjde, nic jiného tu dělat nemůžeš“. Jako ekvivalent v reálném světě si představ, že se chystáš vstoupit do nějaké budovy a někdo ti náhle zatarasí cestu a strčí před nos desky s papírovým formulářem, který musíš vyplnit, aby tě pustil dál, nic jiného dělat nemůžeš. Ve tvém případě návštěvník do budovy vstoupí, může si prohlížet obrázky apod., ale jakmile oznámí „já bych se chtěl přihlásit“, vpálí mu kdosi před nos desky a řekne mu „teď si nic prohlížet nemůžeš, tady to vyplň“ – při čemž návštěvník může buď formulář vyplnit, nebo na deskách nahmatat tlačítko (tj. křížek), kterým obtěžující osobu odežene, nebo začne instinktivně couvat (tj. stiskne prohlížečové Zpět) a tím se dostane do úplně jiné budovy :-) Netvrdím, že by měl být přihlašovací formulář viditelný celý nepřetržitě a na všech stránkách, jen, že to ztmavení/vyřazení/překrytí veškerého okolí se na tento druh interakce nehodí. |
||
| Mirtosqol Profil |
#8 · Zasláno: 31. 1. 2016, 13:29:44
jakre
Děkuji za pomoc, nastavil jsem to na 5001 a funguje jak má. Chamurappi Musím se přiznat, že tuhle práci mám jako studijní projekt a že nároky nejsou tak vysoké, jak kdybych si tou stránkou chtěl vydělávat, tudíž tyhle detaily mohou být opomenuty. Pokud ale znáš způsob jak by se uživatel mohl vrátit klávesou escape popřípadě prohlížeč. zpět, tak prosím o radu. |
||
| Kubo2 Profil |
#9 · Zasláno: 31. 1. 2016, 15:35:35
window.onpopstate = function(event) {
if(event.state.login) {
// zrušiť zobrazenie prihlasovacieho dialógu
}
};
loginButton.onclick = function() {
history.pushState({login:1}, '', '/login');
};Je len na Tebe zaistiť, aby sa na stránke /login dalo normálne prihlásiť aj bez JavaScriptu.
|
||
| RastyAmateur Profil |
#10 · Zasláno: 31. 1. 2016, 16:58:13
Chamurappi:
Nechci tvrdit, že mé řešení je (po menší úpravě) lepší, ale myslím si, že je lehčí na pochopení. Je to pár jednoduchých řádek. To je jedno, už to neřešme. Myslím si, že Mirtosqol zde našel rady, které jistě dobře využije. Mirtosqol: „Pokud ale znáš způsob jak by se uživatel mohl vrátit klávesou escape popřípadě prohlížeč. zpět, tak prosím o radu.“ Pro zjištění, které tlačítko bylo stisknuto se využívá funkce event.keyCode(). Kód escapu je (asi) 27, ověř si to. Pak už je to jednoduché... :) |
||
|
Časová prodleva: 8 let
|
|||
0