jQuery实现点击弹出框外界面关闭弹框
Posted myquark
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery实现点击弹出框外界面关闭弹框相关的知识,希望对你有一定的参考价值。
通过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实现点击弹出框外界面关闭弹框的主要内容,如果未能解决你的问题,请参考以下文章
react native实现model效果/底部弹出框/中间弹框/附代码
怎样用jquery实现弹出框的弹出时渐渐增大,最小化时渐渐变小的特效,在此先感谢!