小禾子的开发笔记

项目开发是学习最有效的方式

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

如何实现点击页面空白处使弹框消失?

最近做项目,需要实现一个效果,就是“下拉框”或者弹框展开/显示之后,并不选择其中一个下拉选项,点击页面空白处,就使下拉框或者弹框收起/隐藏。
如果是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、(.setIcon)(‘.settingDiv’)指的是设置的弹框,即上图箭头2所指的弹框。
2、由于给(document)click(document)绑定事件的话需要注意一下,以免发生冲突。
3、阻止事件冒泡的‘event.stopPropagation();’这句话一定要写,不然可能会没有效果,但是也不报错。
这里写图片描述
希望本文能对你有所帮助!

个人微信公众号:小禾子的魔法盒子,欢迎关注!
这里写图片描述

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/JaneLittle/article/details/70684173
文章标签: jquery select
个人分类: jquery效果
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭