点击弹出层外区域关闭弹出层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 相关文章推荐
js注意img图片的onerror事件的分析
Jan 01 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
Nuxt 项目性能优化调研分析
Nov 07 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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
js 获取时间间隔实现代码
2014/05/12 Javascript
javascript实现微信分享
2014/12/23 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python3 操作符重载方法示例
2017/11/23 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
深入浅析python的第三方库pandas
2020/02/13 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
幼儿园安全责任书
2014/04/14 职场文书
旅游文化节策划方案
2014/06/06 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
民主评议党员个人总结
2015/02/13 职场文书
会计稽核岗位职责
2015/04/13 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
js之ajax文件上传
2021/05/13 Javascript
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers