弹窗开启以及关闭（“closest”用法）

最新推荐文章于 2024-06-07 11:38:13 发布

WEB小牛

最新推荐文章于 2024-06-07 11:38:13 发布

阅读量1.8k

点赞数 1

分类专栏：弹窗 JQuery

本文链接：https://blog.csdn.net/hewu1122/article/details/50628996

版权

弹窗同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JQuery

1 篇文章 0 订阅

订阅专栏

代码中关键的一个用法就是closest的用法。我的理解就是“过滤”，当我我们点击屏幕中黑色的部分的时候，检测当前点击的是不是弹框的部分。也就是 target.closest(“#pop”).length == 0 。如果等于0的话就说明不是弹框区域的内容就触发关闭事件。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-1.11.3.js"></script>
  <style>
      #mypop{
            display:none;
            width:100%; 
            height:100%; 
            position:fixed; 
            top:0; right:0;
            background-color: rgba(0,0,0,0.5);
            }
      #pop{ display:none;
           width:200px; 
           height:200px;
           border:1px solid red; 
           position:absolute;
           top:50%; left:50%;
           margin-top:-100px;
           margin-left:-100px;
           background-color: #fff;
          }
  </style>
 </head>
 <body>
        <button>打开弹出框</button>
        <div id="mypop">
            <div id="pop">
                <p>点击页面中浅黑色的部分。关闭弹窗</p>
            </div>
        </div>
 </body>
 <script>
    $("button").click(function(){
        $("#mypop").fadeIn();
        $("#pop").slideDown();
    })
    $("#mypop").click(function(e){
        var target = $(e.target);
        if( target.closest("#pop").length == 0){
            $("#pop").slideUp();
            $("#mypop").fadeOut();
        }


    })
 </script>
</html>

WEB小牛

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
弹窗开启以及关闭（“closest”用法）

代码中关键的一个用法就是closest的用法。我的理解就是“过滤”，当我我们点击屏幕中黑色的部分的时候，检测当前点击的是不是弹框的部分。也就是 target.closest(“#pop”).length == 0 。如果等于0的话就说明不是弹框区域的内容就触发关闭事件。<!doctype html><html lang="en"> <head> <meta charset="UTF-8">
复制链接

扫一扫

专栏目录