jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】

更新时间：2018年07月31日 10:04:53 作者：夏天的一朵云

这篇文章主要介绍了jQuery实现点击自身以外区域关闭弹出层功能,结合具体实例形式分析了jQuery事件响应及页面元素属性动态操作实现弹出层打开与关闭相关操作技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现点击自身以外区域关闭弹出层功能。分享给大家供大家参考，具体如下：

原理参考前面一篇《JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能》，小编顺便对原文区域外点击bug进行了修改，具体代码如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net jQuery点击关闭弹出层</title>
<style>
.area{width:100%;height:100%;position:fixed;z-index:1;}
.hide{display:none;}
.con{width:400px; height:200px; background-color: #F6F4F0;position:fixed;z-index:2;}
</style>
</head>
<body>
<div class="area hide"></div>
<div class="down">click</div>
<div class="con hide">show-area</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("div.down").click(function(e) {
  e.stopPropagation();
  $("div.con").removeClass("hide");
  $("div.area").removeClass("hide");
 });
 $(".area").click(function() {
  if (!$("div.con").hasClass("hide")) {
   $("div.con").addClass("hide");
   $("div.area").addClass("hide");
  }
 });
});
</script>
</body>
</html>

运行该代码后，点击页面上的click可弹出一个弹出层，再点击弹出层外的空白区域即可关闭弹出层。

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

jQuery中checkbox反复调用attr(''checked'', true/false)只有第一次生效的解决方法
这篇文章主要介绍了jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法,通过使用prop方法代替attr方法来解决此问题,需要的朋友可以参考下
2016-11-11
JQuery中getJSON的使用方法
最近有一个活动，其中的数据需要和纯静态html网站进行交互。但是由于两个网站处于不同的域名下，而Ajax的应用中，由于安全的问题，浏览器默认是不支持跨域调用的，最后选用了JQuery中的getJSON方法
2010-12-12
以WordPress为例讲解jQuery美化页面Title的方法
鼠标移动到超链接时显示Title提示即是所谓Title美化的一般手段,这里我们就以WordPress为例讲解jQuery美化页面Title的方法,需要的朋友可以参考下
2016-05-05
jquery实现的V字形显示效果代码
这篇文章主要介绍了jquery实现的V字形显示效果代码,涉及jQuery数学运算及样式操作的相关技巧,需要的朋友可以参考下
2015-10-10
jQuery中$.ajax()方法的具体使用
本文主要介绍了jQuery中$.ajax()方法的具体使用，$.ajax(url,[settings])通过 HTTP 请求加载远程数据，文中通过示例代码详细的介绍了$.ajax()的用法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
jQuery插件实现屏蔽单个元素使用户无法点击
屏蔽单个元素使用户无法点击在某些特殊的情况下还是蛮有用的,例如及不举了，感兴趣的朋友可以参考下，希望可以帮助到你
2013-04-04
利用jQuery实现简单的拖曳效果实例代码
最近发现一个网站的拖拽效果挺好的,个人觉得是一种不错的用户体验,抽空研究了一下，所以这篇文章主要给大家介绍了关于利用jQuery实现简单的拖曳效果的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起看看详细的介绍吧。
2017-10-10
浅析jquery某一元素重复绑定的问题
本篇文章主要是对jquery某一元素重复绑定的问题进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
Jquery表单验证失败后不提交的解决方法
很多人可能都会遇到在调试的时候用了return了false，可为什么还会提交呢？这个问题我最近也碰到了，尝试了多次也没有用，后来终于发现了其中的问题，下面分享处理给大家，让同样遇到这个问题的朋友们能够看看，有需要的朋友们下面来一起看看吧。
2016-10-10
JS中判断null、undefined与NaN的方法
这篇文章主要介绍了JS中判断null、undefined与NaN的方法,需要的朋友可以参考下
2014-03-03