点击弹出层外区域关闭弹出层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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
js 巧妙去除数组中的重复项
Jan 25 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
详解webpack babel的配置
Jan 09 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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面向对象教程之自定义类
2014/06/10 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
numpy数组广播的机制
2019/07/12 Python
python写程序统计词频的方法
2019/07/29 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
django 模型字段设置默认值代码
2020/07/15 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
教师个人自我鉴定
2014/02/08 职场文书
小学班级口号
2014/06/09 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
Java输出Hello World完美过程解析
2021/06/13 Java/Android
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
Python面向对象编程之类的概念
2021/11/01 Python