jQuery點擊自身以外地方關(guān)閉彈出層的簡單實例
更新時間：2013年12月24日 09:29:03 作者：
本篇文章主要是對jQuery點擊自身以外地方關(guān)閉彈出層的簡單實例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
主要功能是點擊顯示,然后通過點擊頁面的任意位置都能關(guān)閉顯示效果,主要是$(document).click的作用
開發(fā)過程中經(jīng)常有一些彈出層,彈出后要在點擊頁面其他地方時自動關(guān)閉,下面是實現(xiàn)代碼:
HTML代碼：
復(fù)制代碼 代碼如下:
<div class="down">click</div>
<div class="con hide">show-area</div>
CSS代碼：
.hide{display:none;}
JS代碼
復(fù)制代碼 代碼如下:
$(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");
}
});
});
OK，自己本地測試下吧，css樣式自己修改！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了jQuery?基礎(chǔ)選擇器與屬性選擇器，選擇所有元素,此選擇器使用要慎重，其速度是極其慢的，詳細(xì)介紹內(nèi)容需要的小伙伴可以參考一下下面文章內(nèi)容2022-08-08
jQuery查找節(jié)點并獲取節(jié)點屬性的方法
這篇文章主要介紹了jQuery查找節(jié)點并獲取節(jié)點屬性的方法,涉及jQuery簡單獲取節(jié)點及attr與text方法讀取元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-09-09
這是一個基于jquey寫的倒計時。當(dāng)然代碼有點小改動，只是改了一下展示效果。2014-05-05
這篇文章主要介紹了jQuery中inArray方法注意事項,結(jié)合實例形式分析了jQuery中inArray方法變量判斷的相關(guān)注意事項,需要的朋友可以參考下2016-01-01
完美兼容各大瀏覽器的jQuery插件實現(xiàn)圖片切換特效
網(wǎng)友zoeDylan寫的原創(chuàng)jquery插件，實現(xiàn)了圖片輪播功能，jquery插件名稱為zoeDylan.ImgChange，圖片路徑、跳轉(zhuǎn)鏈接、提示標(biāo)題都是有動態(tài)數(shù)組來配置，jquery插件可靈活配置6個參數(shù)， height高、width寬、mgs圖片地址、links點擊地址、tips圖片說明、timers自動切換時間，2014-12-12
jQuery通過寫入cookie實現(xiàn)更換網(wǎng)頁背景的方法
這篇文章主要介紹了jQuery通過寫入cookie實現(xiàn)更換網(wǎng)頁背景的方法,涉及jQuery結(jié)合cookie設(shè)置頁面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-04-04
我們經(jīng)常遇到要操作DOM元素，例如<select>，在Asp.net中Dropdownlist原型就是select。2010-05-05
基于jQuery插件jqzoom實現(xiàn)的圖片放大鏡效果示例
這篇文章主要介紹了基于jQuery插件jqzoom實現(xiàn)的圖片放大鏡效果,結(jié)合實例形式分析了jQuery插件jqzoom的使用方法與相關(guān)注意事項,需要的朋友可以參考下2017-01-01
13個絢麗的Jquery 界面設(shè)計網(wǎng)站推薦
今天共享一些令人振奮的UI教程，這些UI大部分是基于Jquery的插件，主要包括動態(tài)切換視圖的相冊、3D旋轉(zhuǎn)分享按鈕、Facebook admin Panel，下滑效果的導(dǎo)航Menu，滑翔購物車功能，漂亮的Form表單元素等等。2010-09-09
用jquery ajax獲取網(wǎng)站Alexa排名的代碼
其實就是利用了jquery的ajax功能，獲取遠(yuǎn)程的xml文件，讀取指定內(nèi)容的代碼，對于學(xué)習(xí)jquery的朋友是個不錯的參考。2009-12-12