点击弹出层外区域关闭弹出层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 tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
jquery常用操作小结
Jul 21 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
js 实现碰撞检测的示例
Oct 28 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 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开发入门教程之面向对象
2006/12/05 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
详解PHP数组赋值方法
2015/11/07 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
smarty模板数学运算示例
2016/12/11 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
美国在线珠宝商店:SZUL
2017/02/11 全球购物
室内设计专业个人的自我评价
2013/12/18 职场文书
党员批评与自我批评范文
2014/09/23 职场文书