点击弹出层外区域关闭弹出层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 相关文章推荐
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
javascript 可以拖动的DIV(二)
Jun 26 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
js返回顶部实例分享
Dec 21 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 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中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python 递归函数详解及实例
2016/12/27 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
Python中的heapq模块源码详析
2019/01/08 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Pytorch之Variable的用法
2019/12/31 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
STP的判定过程
2012/10/01 面试题
财务管理专业推荐信
2013/11/19 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
军训生自我鉴定范文
2013/12/27 职场文书
终止合同协议书
2014/04/17 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
加强作风建设心得体会
2014/10/22 职场文书