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 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
javascript静态的url如何传递
May 03 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
前台js调用后台方法示例
Dec 02 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
vue获取form表单的值示例
Oct 29 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
SSI指令
2006/11/25 PHP
php实现天干地支计算器示例
2014/03/14 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
解析js如何获取css样式
2016/12/11 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
连接Python程序与MySQL的教程
2015/04/29 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
考试不及格的检讨书
2014/01/22 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
安全生产标语大全
2014/10/06 职场文书
党的群众路线调研报告
2014/11/03 职场文书
劳资员岗位职责
2015/02/13 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
总经理司机岗位职责
2015/04/10 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL