jQuery實現(xiàn)點擊自身以外區(qū)域關(guān)閉彈出層功能完整示例【改進(jì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進(jìn)行了修改，具體代碼如下：

<!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.dhdzp.com 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測試運行效果如下：

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery實現(xiàn)日期聯(lián)動效果實例
這篇文章主要介紹了jQuery實現(xiàn)日期聯(lián)動效果的方法,結(jié)合實例形式分析了jQuery針對日期及頁面元素動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下
2016-07-07
打造基于jQuery的高性能TreeView(asp.net)
項目中經(jīng)常會遇到樹形數(shù)據(jù)的展現(xiàn)，包括導(dǎo)航，選擇等功能，所以樹控件在大多項目中都是必須的。那一個實用的樹應(yīng)該具備什么功能呢？
2011-02-02
jQuery淡入淡出元素讓其效果更為生動
把一個元素淡出或淡入可以達(dá)到更為生動的效果，在任何一種情況下，都只是隨著時間來改變元素的透明度
2014-09-09
jQuery中:text選擇器用法實例
這篇文章主要介紹了jQuery中:text選擇器用法,以實例形式較為詳細(xì)的分析了text選擇器的功能、定義及匹配單行文本框的使用技巧,需要的朋友可以參考下
2015-01-01
jquery.artwl.thickbox.js 一個非常簡單好用的jQuery彈出層插件
jquery.artwl.thickbox.js 一個非常簡單好用的jQuery彈出層插件，需要的朋友可以參考下
2012-03-03
Jquery 學(xué)習(xí)筆記（二）
從最開始看到Jquery這樣的選擇器就讓我想起了CSS的選擇器，簡直是同出一轍啊，CSS的選擇器語法個人覺得相當(dāng)?shù)慕?jīng)典，那么Jquery借鑒CSS也就沒有多少疑問了。
2009-10-10
JQuery 無廢話系列教程(一) jquery入門 [推薦]
貝殼(就是本文作者了)也屬于剛剛會用點JQuery的那一類型, 在學(xué)習(xí)過程中也遇到挺多問題,特別是在開始入門的時候.一直準(zhǔn)備寫些有關(guān)JQuery的文章,但又恐自己文筆及表達(dá)能力有限而"誤人子弟",最終還是鼓起勇氣. 如在文章中有錯誤或者不合適的理解望廣大朋友直接指出批評.
2009-06-06
jQuery UI Dialog控件中的表單無法正常提交的解決方法
研究了頁面源碼后發(fā)現(xiàn)，jQuery UI Dialog控件初始化時動態(tài)生成的HTML元素被添加到頁面的尾部、form元素的后面，而原始的Dialog模板部分（其內(nèi)包含表單元素）也被移到了動態(tài)生成的HTML元素內(nèi)。
2010-12-12
鼠標(biāo)移到導(dǎo)航當(dāng)前位置的LI變色處于選中狀態(tài)
本文所要實現(xiàn)的效果廣泛應(yīng)用于當(dāng)前導(dǎo)航,主要表現(xiàn)為鼠標(biāo)移到導(dǎo)航上面當(dāng)前的LI變色，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助
2013-08-08
商城常用滾動的焦點圖效果代碼簡單實用
此效果在網(wǎng)上使用的頻率比較多一點但大多是插件，要么JS寫的太過于復(fù)雜童鞋們看起來有一定的難度，這個相對來說比較簡單一點,感興趣的可以參考下哈
2013-03-03