点击弹出层外区域关闭弹出层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 focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 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更快的提供文件下载的代码
2012/06/13 PHP
php读取本地json文件的实例
2018/03/07 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python中使用logging模块打印log日志详解
2015/04/05 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
python将unicode转为str的方法
2017/06/21 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
python模块如何查看
2020/06/16 Python
python中类与对象之间的关系详解
2020/12/16 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
生产车间班组长岗位职责
2014/01/06 职场文书
经济管理专业求职信
2014/06/09 职场文书
母亲去世追悼词
2015/06/23 职场文书
行政复议决定书
2015/06/24 职场文书
迎新年主持词
2015/07/06 职场文书
合作协议书格式范本
2016/03/21 职场文书
详解Vue slot插槽
2021/11/20 Vue.js