Dzień dobry w js jestem zielony:) Potrzebuje pomocy mianowicie potrzebuje zrobić js na stronie(sklep prestashop 1.7) który powinien zaciemniać całą stronę po otwarciu menu głównego strony z kategoriami tak aby menu było bardziej widoczne(menu pozostaje białe oraz navbar reszta strony robi się ciemniejsza) Gdy zamykamy z powrotem menu strona powraca do pierwotnego widoku. Jest to mocno skomplikowane są jakieś dostępne gotowe funkcje aby wykonać to zadanie w js? Bo rozumiem ze css w tym przypadku nie wystarczy?
document.getElementById("..").classList.toggle("yourdark_style_css")
myślę że tyle Ci wystarczy
dsxsoft napisał(a):
Dzień dobry w js jestem zielony:) Potrzebuje pomocy mianowicie potrzebuje zrobić js na stronie(sklep prestashop 1.7) który powinien zaciemniać całą stronę po otwarciu menu głównego strony z kategoriami tak aby menu było bardziej widoczne(menu pozostaje białe oraz navbar reszta strony robi się ciemniejsza) Gdy zamykamy z powrotem menu strona powraca do pierwotnego widoku. Jest to mocno skomplikowane są jakieś dostępne gotowe funkcje aby wykonać to zadanie w js? Bo rozumiem ze css w tym przypadku nie wystarczy?
- Po prostu dodaj
<div>
który maposition:fixed
, oraz zapełnia cały ekran. Jest na to wiele sposobów (npwidth:100vw
,height:100vw
) albo npleft:0;right:0;top:0;bottom:0
. - Nie zobaczysz jeszcze nic, bo mimo że on jest na całym ekranie, to nie zaciemnia nic.
- Ustaw mu
background-color:black
, wtedy cały ekran stanie się czarny. - Chcemy żeby był półprzezroczysty, więc ustaw mu też np
opacity:0.3
- Teraz strona jest przyciemniona
- Ustaw mu teraz
opacity:0;
- Wtedy ekran znów będzie całkiem biały.
- Teraz odpal JS'a, i złap tego div'a a potem zmień mu opacity na
0.3
function toggleDarkmode(dark) { document.getElementById("overlay").style.opacity = dark ? "0.3" : "0.0"; } toggleDarkmode(true); // dark toggleDarkmode(false); // light
- Możesz dodać też
transition: opacity 0.5s
, żeby ładnie zanikało
Super bardzo dziękuje:) A jak złapać diva function toggleDarkmode(dark) zamiast dark dac id diva?
Na prestashop niestety nie jest to taka prosta sprawa aby dodac 1 div . Składa sie z bloków w oparciu o smarty trzeba kazdy blok osobno chyba przerobic bo dodam div na cała strone ale zaraz jest kolejny blok/moduł