码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现点击弹出框外界面关闭弹框

时间:2020-02-23 23:54:52      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:第一个   target   div   htm   bsp   方法   color   query   弹框   

通过jQuery的closest方法实现点击弹框以外的部分关闭弹框。

closest() 方法返回被选元素的第一个祖先元素。具体用法:https://www.runoob.com/jquery/traversing-closest.html

 

 1 $(document).ready(function() {
 2             $("body").click(function(e) {
 3                 if ($(e.target).closest("#touch,#miss").length == 0) { //length等于0执行
 4                     $("#miss").hide();
 5                     $("#phone").css("filter", "brightness(100%)");
 6                 }
 7             });
 8             $("#touch").click(function() { //弹出框
 9 
10                 $("#miss").fadeIn("slow");
11                 $("#phone").css("filter", "brightness(50%)");
12 
13             })
14         })

点击id为touch的button时,closest("#touch,#miss),匹配到#touch本身,length为1,弹出弹框。弹出弹框后,点击弹框本身length为1,点击弹框外均为0,达到关闭效果

jQuery实现点击弹出框外界面关闭弹框

标签:第一个   target   div   htm   bsp   方法   color   query   弹框   

原文地址:https://www.cnblogs.com/myquark/p/12355125.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!