点击遮罩层内容区域以外的区域，关闭遮罩层

﹏ヽ暗。殇╰゛Y 2021-11-29 16:36 636阅读 0赞

html

  1. <div class="div1">
  2.     <dl class="div2">
  3.         内容...
  4.     </dl>
  5. </div>

css

  1. .div1{ 
  2.     position: fixed;
  3.     height: 100%;
  4.     width: 100%;
  5.     background: rgba(0,0,0,0.3);
  6.     z-index: 999;
  7. }
  8. .div2{ 
  9.     padding: 0.1rem 0 0.5rem 0.44rem;
  10.     background: #fff;
  11.     max-height: 6rem;
  12.     overflow-x: hidden;
  13.     overflow-y: auto;
  14. }

js

  1. //点击其他区域就隐藏
  2.     $(".div1").click(function (e) { 
  3.         var target = e.target;
  4.         if(target.closest('dl')==null){     //判断，点击的时候，点击到的区域不是为dl时，就隐藏遮罩层
  5.             $(".div1").hide();
  6.         }
  7.     });

注意：在html中，.div1和.div2的标签不能一样，不然js无法进行判断

发表评论

表情：
评论列表 （有 0 条评论，636人围观）

还没有评论，来说两句吧...

相关阅读