点击弹出层外区域关闭弹出层jquery特效示例


Posted in Javascript onAugust 25, 2013

点击弹出层外区域关闭弹出层jquery特效,废话不说,上代码,简洁明了:

<html> 
<head> 
<style> 
.hide{display:none;} 
.con{width:500px;height:300px;background:#000;} 
</style> 
<title>点击弹出层 ,点击弹出层外区域关闭弹出层jquery特效</title> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("div.down").click(function(e) { 
e.stopPropagation(); 
$("div.con").removeClass("hide"); 
}); 
$("div.con a").click(function() { 
$("div.con").addClass("hide"); 
}); $(document).click(function() { 
if (!$("div.con").hasClass("hide")) { 
$("div.con").addClass("hide"); 
} 
}); 
$("div.con").click(function (e) { 
e.stopPropagation();//阻止事件向上冒泡 
}); 

}); 
</script> 
</head> 
<body> 
<div class="down">click</div> 
<div class="con hide">show-area 
<a style="color:#fff;">关闭</a> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
vue实现循环滚动列表
Jun 30 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 #Javascript
javascript jq 弹出层实例
Aug 25 #Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 #Javascript
JS操作JSON要领详细总结
Aug 25 #Javascript
JS 两个字符串时间的天数差计算
Aug 25 #Javascript
js中onload与onunload的使用示例
Aug 25 #Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 #Javascript
You might like
常用的php对象类型判断
2008/08/27 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
javascript的内存管理详解
2013/08/07 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
用python实现批量重命名文件的代码
2012/05/25 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
Python入门教程之if语句的用法
2015/05/14 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
音乐专业应届生教师求职信
2013/11/04 职场文书
汽车专业毕业生推荐信
2013/11/12 职场文书
销售顾问的岗位职责
2013/11/13 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL