点击弹出层外区域关闭弹出层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 29 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
JS闭包用法实例分析
Mar 27 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
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.MVC的模板标签系统(二)
2006/09/05 PHP
一个php作的文本留言本的例子(五)
2006/10/09 PHP
flash用php连接数据库的代码
2011/04/21 PHP
php 猴子摘桃的算法
2017/06/20 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
关于vue面试题汇总
2018/03/20 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
原生js实现购物车
2020/09/23 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
深入理解Python3中的http.client模块
2017/03/29 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
python中time tzset()函数实例用法
2021/02/18 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
德国足球商店:OUTFITTER
2019/05/06 全球购物
介绍Java的内部类
2012/10/27 面试题
什么时候需要进行强制类型转换
2016/09/03 面试题
Unix里面如何在后台运行程序
2016/10/14 面试题
环境科学毕业生自荐信
2013/11/21 职场文书
医生进修自我鉴定
2014/01/19 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
产品推广策划方案
2014/05/10 职场文书
美术课外活动总结
2014/07/08 职场文书
委托函范文
2015/01/29 职场文书
2019入党申请书格式
2019/06/25 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python