jquery实现点击页面空白处,弹框消失
来源:互联网 发布:linux虚拟机网络不通 编辑:程序博客网 时间:2024/06/05 14:13
如何实现点击页面空白处使弹框消失?
最近做项目,需要实现一个效果,就是“下拉框”或者弹框展开/显示之后,并不选择其中一个下拉选项,点击页面空白处,就使下拉框或者弹框收起/隐藏。
如果是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、
2、由于给
3、阻止事件冒泡的‘event.stopPropagation();’这句话一定要写,不然可能会没有效果,但是也不报错。
希望本文能对你有所帮助!
1 0
- jquery实现点击页面空白处,弹框消失
- jquery实现点击空白处隐藏弹框
- 让Android dialog弹框点击空白处不会消失
- PopupWindow 点击空白处 消失
- android实现点击空白处,软键盘消失事件
- jquery实现点击空白处隐藏元素
- bootstrap弹窗点击空白处不消失
- Android 弹款点击空白处不消失
- Android 编辑框 点击空白处,键盘消失
- 点击空白处不消失的对话框
- android edittext点击空白处键盘消失
- 点击空白处使PopUpWindow消失
- 点击空白处,软键盘消失
- popupwindow点击空白处如何自动消失?
- select2点击空白处不消失
- 点击空白处,软键盘消失
- jquery实现点击div空白处隐藏该div
- jq实现点击空白处,指定元素消失,且指定元素内部事件不受影响
- 闭包
- Xml Dom
- matlab版faster-rcnn配置流程
- 背景拉伸
- Deep Learning(深度学习)学习笔记整理
- jquery实现点击页面空白处,弹框消失
- Django数据库配置【models】
- 【LeedCode】121.Best Time to Buy and Sell Stock
- 用MindManager绘制英语语法思维导图
- 写给Android开发者的Java 8简单入门教程
- 最大似然估计
- Java关键字transient和volatile小结(转)
- Idea 创建Maven多模块项目
- 目标检测之libpabod