我如何讓屏幕上的所有內容都變暗，除了你點擊漢堡按鈕的 sidenav 一個

Question

我想讓屏幕在點擊和打開 sidenav 時變暗，並可能凍結屏幕的其余部分，這樣你就不能向下滾動頁面，但只能在 sidenav 上，我用於打開導航的 js 目前在下面，我只有背景變暗，但頁面上的所有鏈接仍然亮起並且可以點擊，我如何讓一切變得更暗，謝謝

 // burger menu button with effects //
    function openNav() {
      document.getElementById("mySidenav").style.width = "280px";
      document.body.style.background = "rgba(0,0,0,.8)";
      document.getElementById("despair").style.opacity = "0.33";
      document.getElementById("closebtn").style.marginLeft = "200px";
    }

Answer 1

這個基本示例將在單擊按鈕時在頁面前面放置一個阻塞封面。 正如我在評論中所說，它通過使用元素classList並在 div 上切換一個用作封面的類來運行。

在這個例子中，蓋子在 5 秒后被移除； 實際上，您會在某些事件之后移除封面，例如當用戶在您的 sidenav 中做出另一個選擇時，或者，如果從 sidenav 導航到另一個頁面，您將不必移除封面，因為新的目標頁面不會把它最初。

為了更精確的控制，您可以使用add和remove代替toggle 。

如果您想讓 sidenav 保持可用（不被阻止），您可以將其設置為比封面更高的 z-index。

 const cover = document.getElementById('cover'); const blockit = document.getElementById('blockit'); blockit.addEventListener('click', function(event) { event.preventDefault(); cover.classList.toggle('covering'); window.setTimeout(function() { cover.classList.toggle('covering'); }, 5000); });

 /* The cover starts off not being displayed, with a size of 0 x 0 pixels, and "behind" the rest of the page (negative z-index) */ div#cover { display: none; position: fixed; top: 0; left: 0; height: 0; width: 0; z-index: -1; } /* When the "covering" class is added to the cover it is displayed, has the size set to 100%, and is raised to z-index 100, in front of the rest of the page content. */ div#cover.covering { display: block; height: 100%; width: 100%; z-index: 100; background-color: rgba(0, 0, 0, 30%); }

 <main> <p> This is a sample paragraph. It has a link to <a href="https://stackoverflow.com/">Stackoverflow</a> within the text of the paragraph. You want to make that link unclickable. </p> <button id="blockit">Block It</button> </main> <div id="cover"></div>