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 相关文章推荐
JavaScript中this关键字使用方法详解
Mar 08 Javascript
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
浅谈JavaScript 声明提升
Sep 14 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中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
Python实现带百分比的进度条
2016/06/28 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
python能做哪些生活有趣的事情
2020/09/09 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
公司面试感谢信
2014/02/01 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
小学生教师节广播稿
2015/08/19 职场文书
十二月早安励志心语大全
2019/12/03 职场文书