点击弹出层外区域关闭弹出层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 可以拖动的DIV(二)
Jun 26 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 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
用ODBC的分页显示
2006/10/09 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
python文件和目录操作函数小结
2014/07/11 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
python中map()函数的使用方法示例
2017/09/29 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
python写一个md5解密器示例
2018/02/23 Python
python使用插值法画出平滑曲线
2018/12/15 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
Java程序员面试90题
2013/10/19 面试题
法律专业推荐信范文
2013/11/29 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
任命书模板
2014/06/04 职场文书
推广普通话标语
2014/06/27 职场文书
ktv好的活动方案
2014/08/15 职场文书
公务员政审材料范文
2014/12/23 职场文书
2019销售早会主持词
2019/06/27 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers