Zaciemnienie strony po otwarciu menu na stronie.

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 ma position:fixed, oraz zapełnia cały ekran. Jest na to wiele sposobów (np width:100vw,height:100vw) albo np left: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ł