点击弹出层外区域关闭弹出层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 RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
详解vuex状态管理模式
Nov 01 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
js实现磁性吸附的示例
Oct 26 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面向对象分析设计的61条军规小结
2010/07/17 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
stripos函数知识点实例分享
2019/02/11 PHP
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
使用js实现数据格式化
2014/12/03 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
Python模拟登录12306的方法
2014/12/30 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
python删除服务器文件代码示例
2018/02/09 Python
Python 多维List创建的问题小结
2019/01/18 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
中国跨境电商:Tomtop
2017/03/16 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
一年级数学教学反思
2014/02/01 职场文书
禁止酒驾标语
2014/06/25 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
保外就医申请书范文
2015/08/06 职场文书
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
Spring中bean集合注入的方法详解
2022/07/07 Java/Android