关闭

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

标签: jqueryselect
4389人阅读 评论(0) 收藏 举报
分类:

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

最近做项目,需要实现一个效果,就是“下拉框”或者弹框展开/显示之后,并不选择其中一个下拉选项,点击页面空白处,就使下拉框或者弹框收起/隐藏。
如果是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();’这句话一定要写,不然可能会没有效果,但是也不报错。
这里写图片描述
希望本文能对你有所帮助!

1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

jQuery点击空白处隐藏弹出层

一款jQuery点击空白处隐藏弹出层网页特效,点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document...
  • Sky786905664
  • Sky786905664
  • 2016-11-23 19:36
  • 5857

点击页面空白处时隐藏弹出的div层

由于工作需要,最近玩了下js,需求是做一个弹出层(需求上只有个原型图,什么说明都没有我也是醉了),然后就开始想需要实现的效果,那么点击空白处需要隐藏肯定是不可少的。下边是这个div弹出层: ...
  • liquantong
  • liquantong
  • 2015-11-27 10:04
  • 2854

jquery点击空白处隐藏弹出层的写法

jquery点击空白处隐藏弹出层的写法 点击按钮展开弹出层以及点击关闭按钮关闭弹出层的效果,都很简单,但是展开弹出层后点击空白处也能关闭弹出层的效果,一开始对我来说却是有点难度的,研究了一下...
  • xj_li
  • xj_li
  • 2016-05-25 11:09
  • 1529

【web】a标签点击时跳出确认框

需求如下: 在跳转链接前,需要判断该用户是否有权限打开页面,没有权限的弹出一个确认框提示“没有权限”,有权限的则直接跳转页面。 参考资料一: http://jingyan.baidu.com/...
  • michael_ouyang
  • michael_ouyang
  • 2016-10-09 13:52
  • 6915

jQuery点击空白处隐藏弹出层

一款jQuery点击空白处隐藏弹出层网页特效,点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document...
  • Sky786905664
  • Sky786905664
  • 2016-11-23 19:36
  • 5857

点击页面空白处时隐藏弹出的div层

由于工作需要,最近玩了下js,需求是做一个弹出层(需求上只有个原型图,什么说明都没有我也是醉了),然后就开始想需要实现的效果,那么点击空白处需要隐藏肯定是不可少的。下边是这个div弹出层: ...
  • liquantong
  • liquantong
  • 2015-11-27 10:04
  • 2854

在空白处点击,实现隐藏div(下拉菜单或其它弹框)的方法

一个小需求的实现,有时候我们点击网站页面的一个下拉菜单按钮,可能要再次点击那个按钮才能使下拉菜单消失,这里要实现的需求是在其他地方(除下拉菜单和按钮以外的地方)点击也要使下拉菜单消失,这样做可以提高用...
  • s915097991
  • s915097991
  • 2016-04-16 21:37
  • 6638

jquery实现点击空白处隐藏元素

一款jQuery点击空白处隐藏弹出层网页特效,点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document...
  • qq_35367612
  • qq_35367612
  • 2017-12-04 15:45
  • 83

使用jquery实现点击按钮弹出层和点击空白处隐藏层

使用jquery弹出层和点击空白处隐藏层 $(function () { $('#btnShow').click(f...
  • bianjing40
  • bianjing40
  • 2015-10-25 01:15
  • 2807

jQuery实现文本域提示文字点击后消失

使用jQuery实现文本域内提示文字,当鼠标点击进文本域后自动消失,文本域失去鼠标焦点后显示提示文字或显示用户输入的文字。 实现思路很简单,只需监听文本域的鼠标点击进入和失去鼠标焦点事件即可。 ...
  • u283056051
  • u283056051
  • 2015-09-07 21:15
  • 2868
    个人资料
    • 访问:49907次
    • 积分:577
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:0篇
    • 译文:0篇
    • 评论:6条
    最新评论