点击弹出层外区域关闭弹出层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实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
详解vue 项目白屏解决方案
Oct 31 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
使用express来代理服务的方法
Jun 21 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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
百度留言本js 大家可以参考下
2009/10/13 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
python3中int(整型)的使用教程
2017/03/23 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
个人简历自我评价八例
2013/10/31 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
答辩状格式范本
2015/05/22 职场文书