一个菜鸟的互联网技术分享博客
您的位置: 主页 > jquery实现点击页面空白处,弹框消失
advertisement

jquery实现点击页面空白处,弹框消失



如图所示的一个下拉框,在点击地区input框时候下拉,再次点击消失或者点击别的空白地方也实现消失,

样式和html就不写了,直接上js

  1. $('.area_input').click(function (event) {  
  2.         event.stopPropagation();//阻止事件冒泡  
  3.         $('.areaText').fadeToggle();  
  4.   
  5.         var tag = $('.areaText')  
  6.         var flag = true;  //默认状态下是显示的  
  7.         $(document).bind("click",function(e){  
  8.             //点击空白处,设置的弹框消失  
  9.             var target = $(e.target);  
  10.             if(target.closest(tag).length == 0 && flag == true){  
  11.                 $(tag).hide();  
  12.                 flag = false;  
  13.             }  
  14.         });  
  15.     })  

注意点:
1、阻止事件冒泡的‘event.stopPropagation();’这句话一定要写,不然可能会没有效果,但是也不报错。 
2、由于给(document)绑定了click事件,所以如果其他地方有需要给(document)绑定事件的话需要注意一下,以免发生冲突。 
3、('.area_input')是input框,('.areaText')指的是设置的弹框

zhangren.online
上一篇:值得收藏的 15 个 JavaScript 和 CSS 动画库
下一篇:原生js实现移动端Touch滑动反弹

您可能喜欢

​javaascript之数字倒计时

​javaascript之数字倒计时

​常用函数

​常用函数

​不常见css属性汇总

​不常见css属性汇总

回到顶部