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 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 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
构建简单的Webmail系统
2006/10/09 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
Python中的lstrip()方法使用简介
2015/05/19 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
详解python基础之while循环及if判断
2017/08/24 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
工作表扬信的范文
2014/01/10 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
面试通知邮件
2015/04/20 职场文书
请客吃饭开场白
2015/06/01 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android
Golang bufio详细讲解
2022/04/21 Golang
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL