点击弹出层外区域关闭弹出层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入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
js创建元素(节点)示例
Jan 02 Javascript
javascript操作表格排序实例分析
May 06 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
JavaScript 异步调用
Oct 25 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
vue动态绑定style样式
Apr 20 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 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
python使用KNN算法手写体识别
2018/02/01 Python
Python函数式编程实例详解
2020/01/17 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
诚信考试倡议书
2014/04/15 职场文书
生日宴会策划方案
2014/06/03 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
圆明园观后感
2015/06/03 职场文书
68句权威创业名言
2019/08/26 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers