点击弹出层外区域关闭弹出层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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
js实现登录与注册界面
Nov 01 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
原生js实现分页效果
Sep 23 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写的serv-u的web申请账号的程序
2006/10/09 PHP
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
Python查找相似单词的方法
2015/03/05 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
Python打包可执行文件的方法详解
2016/09/19 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
浅析python连接数据库的重要事项
2021/02/22 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
创新比赛获奖感言
2014/02/13 职场文书
企业出纳岗位职责
2014/03/12 职场文书
考博专家推荐信
2014/05/10 职场文书
志愿者宣传口号
2014/06/17 职场文书
5.12护士节活动总结
2015/02/10 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
python实现双链表
2022/05/25 Python
Python实现聚类K-means算法详解
2022/07/15 Python