jQuery点击自身以外地方关闭弹出层的简单实例


Posted in Javascript onDecember 24, 2013

主要功能是点击显示,然后通过点击页面的任意位置都能关闭显示效果,主要是$(document).click的作用

开发过程中经常有一些弹出层,弹出后要在点击页面其他地方时自动关闭,下面是实现代码:

HTML代码:

<div class="down">click</div>
<div class="con hide">show-area</div>

CSS代码:
.hide{display:none;}

JS代码

$(document).ready(function(){
$("div.down").click(function(e){
e.stopPropagation();
$("div.con").removeClass("hide");
});
$(document).click(function(){
if(!$("div.con").hasClass("hide")){
$("div.con").addClass("hide");
}
});
});

OK,自己本地测试下吧,css样式自己修改!
Javascript 相关文章推荐
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
详解jQuery中的easyui
Sep 02 jQuery
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
JS刷新当前页面的几种方法总结
Dec 24 #Javascript
js中indexof的用法详细解析
Dec 24 #Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 #Javascript
JS Replace 全部替换字符的用法小结
Dec 24 #Javascript
JS获取url链接字符串 location.href
Dec 23 #Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 #Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 #Javascript
You might like
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
javascript document.referrer 用法
2009/04/30 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
python中MySQLdb模块用法实例
2014/11/10 Python
Python实现简单多线程任务队列
2016/02/27 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
Python中if有多个条件处理方法
2020/02/26 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
北京SQL新华信咨询
2016/09/30 面试题
工厂采购员岗位职责
2014/04/08 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
优秀党员事迹材料
2014/12/18 职场文书
英语导游词
2015/02/13 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
Python 数据可视化之Seaborn详解
2021/11/02 Python