点击弹出层外区域关闭弹出层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 未结束的字符串常量常见解决方法
Jan 24 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
JS截取字符串实例详解
Nov 24 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
微信小程序实现订单倒计时
Nov 01 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
php flush类输出缓冲剖析
2008/10/19 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
详解Python中的变量及其命名和打印
2016/03/11 Python
django之常用命令详解
2016/06/30 Python
对Python中plt的画图函数详解
2018/11/07 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
详解Anaconda 的安装教程
2020/09/23 Python
python实现计算图形面积
2021/02/22 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
求职简历中个人的自我评价
2013/12/25 职场文书
学生感冒英文请假条
2014/02/04 职场文书
技术员个人工作总结
2015/03/03 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
结婚仪式主持词
2015/06/29 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
php解析非标准json、非规范json的方式实例
2022/05/10 PHP