最新消息
标签搜索
jQuery 弹出层点击非本区域或遮罩层隐藏
jQuery 弹出层点击非本区域或遮罩层隐藏
2021年04月01日 514 阅读
  • 首页
  • /
  • 笔记
  • /
  • 正文
  • 扯一下闲话

    菜鸟想要实现一个效果,就要受尽很多折磨。今天花了几个小时都没实现,回家后又花了半小时,终于实现了。

    想要的效果

    • 点击一个按钮,弹出一个侧边菜单,同时显示一个遮罩层
    • 再次点击按钮,侧边栏和遮罩层隐藏
    • 弹出层的子元素不受影响

    实现过程

    css代码

    .proup {
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        cursor: pointer;
        z-index: 7777;
        background: rgba(0,0,0,0.65);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    html代码

    <div class="btn"></div>
    
    <div class="proup"></div>
    
    <div class="menu">
      
    
    <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    
    </div>
    

    jQuery 代码

    $('.btn').click(function(event) {
      event.stopPropagation();
      $('.menu').toggle();
      $('.proup').toggle();
    })
    $(document).click(function(event){
      var _m = $('.menu');
      if(!_m.is(event.target) && _m.has(event.target).length == 0){
        $('.menu').hide();
        $('.proup').hide();
      }
    })

    实现原理

    1. 使用 event.stopPropagation(); 取消事件冒泡;
    2. 通过 !_m.is(event.target) && _m.has(event.target).length == 0 判断,点击非本区域或遮罩层时隐藏侧边栏
    2
    那年今日

    评语 (0)

    取消