返回

侧边栏显示时禁用背景及点击关闭: CSS/JS实现

javascript

侧边栏显示时禁用背景及点击背景关闭侧边栏

在构建具有侧边栏的 Web 应用时,常见需求是在侧边栏显示时禁用页面背景内容,使用户的交互集中在侧边栏上。同时,用户点击侧边栏以外的任何区域都应关闭侧边栏,恢复背景的可用性。本文探讨如何使用 CSS 和 JavaScript 实现此效果。

问题分析

通常,当侧边栏显示时,页面上的其他元素仍可交互。这会导致用户体验不佳,比如在侧边栏开启时仍可以点击或操作背景内容,容易造成混乱。因此需要采取措施,禁用背景并捕获点击事件。

解决方案一:遮罩层方案

最常见且直观的方法是,在侧边栏出现时创建一个覆盖整个视口的遮罩层。遮罩层可以利用半透明背景色实现视觉提示,并且该层本身可以拦截点击事件。

实现步骤:

  1. 创建遮罩层 HTML 元素:<body> 内部创建一个 <div> 元素,用作遮罩层。
  2. 添加遮罩层 CSS 样式: 设置该 <div> 元素的 positionfixed,使其覆盖整个视口。赋予其背景色和半透明度。将 z-index 设置高于页面上其他内容。初始时隐藏遮罩层。
  3. JavaScript 控制: 当侧边栏显示时,利用 JavaScript 显示遮罩层,并设置 display: block;visibility: visible 。同时添加一个点击事件监听器到遮罩层,点击时隐藏遮罩层,并关闭侧边栏。当侧边栏隐藏时,隐藏遮罩层,恢复背景互动性。

代码示例:

<div id="menu">
    <span class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s1">
        <h4>Avinash</h4>
    </span>
</div>
<div id="content">
    <section id="about">
        <button id="showRight">Show</button>
        <button id="showRight2">Hide</button>
    </section>
    <div id="overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999;"></div>

</div>

<script>
    var menuRight = document.getElementById( 'cbp-spmenu-s1' ),
        showRight = document.getElementById( 'showRight' ),
        showRight2 = document.getElementById( 'showRight2' ),
        content = document.getElementById( 'content' ),
        overlay = document.getElementById('overlay');

    showRight.onclick = function() {
        menuRight.style.right = '0px';
        overlay.style.display = 'block';
        document.body.classList.add('overflow-hidden')
    };

    showRight2.onclick = function() {
         menuRight.style.right = '-400px';
          overlay.style.display = 'none';
          document.body.classList.remove('overflow-hidden')
    };


   overlay.onclick = function(){
       menuRight.style.right = '-400px';
       overlay.style.display = 'none';
       document.body.classList.remove('overflow-hidden');

   }
</script>

在这个代码中:

  • 我们添加了一个ID为“overlay”的 div元素,初始化设置为隐藏。
    - showRight 点击的时候显示侧边栏,和overlay, 并给 body 添加了一个overflow-hidden的样式,目的是禁用滚动条。
    - 点击hide 和 点击overlay都会隐藏侧边栏,隐藏遮罩,并且移除 body的 overflow-hidden class

原理: 遮罩层阻止了页面上任何元素接收点击事件,将其事件交给了自己,而 JavaScript 事件监听器捕获该点击,关闭侧边栏并移除遮罩。

解决方案二:CSS属性 pointer-events

使用 CSS 的 pointer-events 属性,可以在侧边栏出现时禁用背景元素上的鼠标事件。这样可以直接防止用户与背景交互,从而实现 “禁用” 的效果。

实现步骤:

  1. CSS 定义: 创建一个 CSS 类,如 disable-interaction,将 pointer-events 设置为 none。这个类应该作用于 content 或者包含 content 元素的父级 div。
  2. JavaScript 控制: 当侧边栏显示时,利用 JavaScript 将 disable-interaction 类添加到 content 元素;隐藏时移除。

代码示例:

<style>
   .disable-interaction{
       pointer-events:none;
       opacity:0.5;

    }

</style>

<div id="menu">
    <span class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s1">
        <h4>Avinash</h4>
    </span>
</div>
<div id="content" >
    <section id="about">
        <button id="showRight">Show</button>
        <button id="showRight2">Hide</button>
    </section>

</div>
<script>
    var menuRight = document.getElementById( 'cbp-spmenu-s1' ),
        showRight = document.getElementById( 'showRight' ),
        showRight2 = document.getElementById( 'showRight2' ),
        content = document.getElementById( 'content' );
          body = document.body

    showRight.onclick = function() {
        menuRight.style.right = '0px';
        content.classList.add("disable-interaction");

    };

    showRight2.onclick = function() {
       menuRight.style.right = '-400px';
       content.classList.remove("disable-interaction");


    };


 document.body.onclick = (e) => {
      if(showRight.classList.contains("active") ){
       if (e.target !== menuRight && !menuRight.contains(e.target)){
           menuRight.style.right = '-400px';
            content.classList.remove("disable-interaction")
              showRight.classList.remove("active")

          }
      }
    }
</script>
  • 此方法避免了创建额外的遮罩层。通过 CSS 控制了交互事件。
    • 此处添加了一个全局的body点击事件监听,确保点击 sidebar 外的内容就隐藏 sidebar,需要给showRight 添加一个active状态的css

原理: pointer-events: none 使得元素对所有鼠标事件(如点击、悬停) “透明”。这样鼠标事件将穿透禁用元素,作用于其下方的元素(实际上是没有触发任何事件的)。但要注意:此方法并未在技术上阻止页面交互,只是禁止了鼠标输入,比如依然可以通过键盘交互(如通过Tab切换焦点)。

额外安全建议

使用 JavaScript 操作 DOM 元素时,务必对用户输入的数据进行验证和过滤。确保操作不会引起安全漏洞(比如跨站脚本攻击XSS),谨慎对待用户输入的数据并避免不安全地设置 DOM 属性或 CSS 样式。同时应该关注不同浏览器表现差异并进行兼容性处理。

总结

这两种解决方案,都解决了侧边栏出现时禁用背景内容,以及点击背景关闭侧边栏的需求。第一个方案通过创建遮罩层拦截交互,第二个方案利用 CSS 直接禁用鼠标事件,可按实际场景需要选择。实际应用中应根据需求调整,兼顾可用性和性能。