快捷導(dǎo)航

jQuery實現(xiàn)點擊自身以外區(qū)域關(guān)閉彈出層功能完整示例【改進版】

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

這篇文章主要介紹了jQuery實現(xiàn)點擊自身以外區(qū)域關(guān)閉彈出層功能,結(jié)合具體實例形式分析了jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作實現(xiàn)彈出層打開與關(guān)閉相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)點擊自身以外區(qū)域關(guān)閉彈出層功能。分享給大家供大家參考，具體如下：

原理參考前面一篇《JS使用遮罩實現(xiàn)點擊某區(qū)域以外時彈窗的彈出與關(guān)閉功能》，小編順便對原文區(qū)域外點擊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.dbjr.com.cn jQuery點擊關(guān)閉彈出層</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可彈出一個彈出層，再點擊彈出層外的空白區(qū)域即可關(guān)閉彈出層。

使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試運行效果如下：