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中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
canvas实现钟表效果
Feb 13 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 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下将XML转换为数组
2010/01/01 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
jquery easyui使用心得
2014/07/07 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
python使用matplotlib绘制热图
2018/11/07 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
python 异步async库的使用说明
2020/05/04 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
教学大赛获奖感言
2014/01/15 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
python状态机transitions库详解
2021/06/02 Python
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL