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使用function定义对象并调用的方法
Mar 23 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
KnockoutJs快速入门教程
May 16 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
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判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
python进程与线程小结实例分析
2018/11/11 PHP
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python制作Windows系统服务
2017/03/25 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
家居设计专业个人自荐信范文
2013/11/26 职场文书
安全横幅标语
2014/06/09 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
分居协议书范本
2014/11/03 职场文书
鸦片战争观后感
2015/06/09 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书