jquery三个关闭弹出层的小示例


Posted in Javascript onNovember 05, 2013

在开发应用中我们做了一个弹出层,有时我们会做一个关闭按钮,这样点击关闭就可以把弹出层关闭了,但是有时希望只要不点击弹出层内就自动关闭弹出层了,下面我总结了三个实例。
例1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>点击空白处关闭弹出窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.pop{width:200px;height:130px;background:#080;}
</style>
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $(document).bind("click",function(e){
  var target  = $(e.target);
  if(target.closest(".pop").length == 0){
   $(".pop").hide();
  }
 }) 
})
</script>
</head>
<body>
<div class="pop"></div>
</body>
</html>

例2,点击自身以外地方关闭弹出层

<html>
<style>
.hide{display:none;}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("div.down").click(function(e) {
        e.stopPropagation();
        $("div.con").removeClass("hide");
    });
    $(document).click(function() {
        if (!$("div.con").hasClass("hide")) {
            $("div.con").addClass("hide");
        }
    });
});
</script>
<body>
    <div class="down">click</div>
    <div class="con hide">show-area</div>
</body>
</html>
 

例3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery点击空白处关闭弹出层</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
#box{width:300px;height:200px;border:1px solid #000;display:none; margin:0 auto;}
.btn{color:red;}
</style>
<script src="http://www.honoer.com/Public/Js/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $(".btn").click(function(event){
  var e=window.event || event;
  if(e.stopPropagation){
   e.stopPropagation();
  }else{
   e.cancelBubble = true;
  }  
  $("#box").show();
 });
 $("#box").click(function(event){
  var e=window.event || event;
  if(e.stopPropagation){
   e.stopPropagation();
  }else{
   e.cancelBubble = true;
  }
 });
 document.onclick = function(){
  $("#box").hide();
 };
})
</script>
</head>
<body>
<div id="box">打开我了,点空白关闭啊,谢谢</div>
<span class="btn">打开弹出层</span>
</body>
</html>
 
Javascript 相关文章推荐
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
浅析Vue 生命周期
Jun 21 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
jquery ajax post提交数据乱码
Nov 05 #Javascript
jquery ajax属性async(同步异步)示例
Nov 05 #Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 #Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 #Javascript
客户端js性能优化小技巧整理
Nov 05 #Javascript
js倒计时小程序
Nov 05 #Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 #Javascript
You might like
如何过滤高亮显示非法字符
2006/10/09 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
javascript window对象属性整理
2009/10/24 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
简单的js计算器实现
2016/10/26 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
javascript实现手动点赞效果
2019/04/09 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
Vue实现日历小插件
2019/06/26 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
Python深入学习之对象的属性
2014/08/31 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
python实现飞行棋游戏
2020/02/05 Python
Python中私有属性的定义方式
2020/03/05 Python
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
运动会稿件100字
2014/02/21 职场文书
保证书范文大全
2014/04/28 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书