点击弹出层外区域关闭弹出层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中复制行和删除行的操作实例
Jun 25 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 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
星际实力自我测试
2020/03/04 星际争霸
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
Angular路由简单学习
2016/12/26 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
实例讲解python中的序列化知识点
2018/10/08 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
机电一体化自荐信
2013/12/10 职场文书
村官工作鉴定评语
2014/01/27 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
股东授权委托书
2014/10/15 职场文书
springboot读取nacos配置文件
2022/05/20 Java/Android