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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
javascript 计算两个整数的百分比值
Dec 26 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
javascript实现前端成语点击验证
Jun 24 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
php 时间计算问题小结
2009/01/04 PHP
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
php提取微信账单的有效信息
2018/10/01 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
使用PDB简单调试Python程序简明指南
2015/04/25 Python
python3序列化与反序列化用法实例
2015/05/26 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
详解python程序中的多任务
2020/09/16 Python
高级文秘工作总结的自我评价
2013/09/28 职场文书
中学生运动会入场词
2014/02/12 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
党小组推荐意见
2015/06/02 职场文书
成绩单家长意见
2015/06/03 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python