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