#如何实现点击页面空白处使弹框消失?
最近做项目,需要实现一个效果,就是“下拉框”或者弹框展开/显示之后,并不选择其中一个下拉选项,点击页面空白处,就使下拉框或者弹框收起/隐藏。
如果是select标签的话,就很简单了,select失去焦点的时候,select自己会收起。但是实际项目中,select并不能满足全部的需要,有时我们需要用ul、li来模拟下拉框。还有些弹框,点击空白处使弹框消失,可以简化用户操作,进而提高用户体验。如果不用插件的话,怎么实现这种效果呢?
如上图,本文实现的效果是,点击箭头1的设置图标,箭头2的弹框toggle,在箭头2的弹框显示时候,点击页面的其他部分,箭头2的弹框也会隐藏。
HTML布局和css样式就不再贴代码了,重点看一下给箭头1绑定的js事件:
$('.setIcon').on('click',function (event) {
event.stopPropagation();//阻止事件冒泡
$(this).siblings('.settingDiv').toggle();
//点击空白处,下拉框隐藏-------开始
var tag = $(this).siblings('.settingDiv');
var flag = true;
$(document).bind("click",function(e){//点击空白处,设置的弹框消失
var target = $(e.target);
if(target.closest(tag).length == 0 && flag == true){
$(tag).hide();
flag = false;
}
});
//点击空白处,下拉框隐藏-------结束
});
代码说明(附下图):
1、
(
′
.
s
e
t
I
c
o
n
′
)
指
的
是
设
置
的
图
标
,
('.setIcon')指的是设置的图标,
(′.setIcon′)指的是设置的图标,(’.settingDiv’)指的是设置的弹框,即上图箭头2所指的弹框。
2、由于给
(
d
o
c
u
m
e
n
t
)
绑
定
了
c
l
i
c
k
事
件
,
所
以
如
果
其
他
地
方
有
需
要
给
(document)绑定了click事件,所以如果其他地方有需要给
(document)绑定了click事件,所以如果其他地方有需要给(document)绑定事件的话需要注意一下,以免发生冲突。
3、阻止事件冒泡的‘event.stopPropagation();’这句话一定要写,不然可能会没有效果,但是也不报错。
希望本文能对你有所帮助!
个人微信公众号:侦探小禾子,闲聊育儿生活星座塔罗牌,野生法考通过者免费法律咨询,欢迎关注!