点击弹出层外区域关闭弹出层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 相关文章推荐
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
PHP 代码规范小结
2012/03/08 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PHP与以太坊交互详解
2018/08/24 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
python 实现堆排序算法代码
2012/06/05 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
用python实现的线程池实例代码
2018/01/06 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
python游戏地图最短路径求解
2019/01/16 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
印度网上药店:1mg
2017/10/13 全球购物
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
毕业生找工作的求职信范文
2013/12/24 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
篮球拉拉队口号
2015/12/25 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书