jQuery點(diǎn)擊自身以外地方關(guān)閉彈出層的簡單實例

更新時間：2013年12月24日 09:29:03 作者：

本篇文章主要是對jQuery點(diǎn)擊自身以外地方關(guān)閉彈出層的簡單實例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助

主要功能是點(diǎn)擊顯示,然后通過點(diǎn)擊頁面的任意位置都能關(guān)閉顯示效果,主要是$(document).click的作用

開發(fā)過程中經(jīng)常有一些彈出層,彈出后要在點(diǎn)擊頁面其他地方時自動關(guān)閉,下面是實現(xiàn)代碼:

HTML代碼：

<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實現(xiàn)背景跟隨鼠標(biāo)滑動導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了jquery背景跟隨鼠標(biāo)滑動導(dǎo)航，特別美觀，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-11-11
jquery制作居中遮罩層效果分享
這篇文章主要介紹了jquery制作居中遮罩層效果示例,需要的朋友可以參考下
2014-02-02
jQuery中delegate()方法用法實例
這篇文章主要介紹了jQuery中delegate()方法用法,實例分析了delegate()方法的功能、定義及為匹配元素的子元素添加一個或多個事件,并規(guī)定當(dāng)這些事件發(fā)生時運(yùn)行函數(shù)的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery發(fā)送Ajax請求的幾種方法舉例
Ajax一個向后端發(fā)送請求的方式,下面這篇文章主要給大家介紹了關(guān)于jQuery發(fā)送Ajax請求的幾種方法,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用jQuery具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2023-06-06
JQuery調(diào)用WebServices的方法和4個實例
你是不是經(jīng)常作這種開發(fā)，前端用JS寫邏輯，后端用aspx或者ashx作服務(wù)？你是不是經(jīng)常在請求aspx的時候在查詢字符串中拼接諸如a.aspx?method=getDepartmetn&param1=1&param2=2的字符串？
2014-05-05
使用jquery實現(xiàn)IE下按backspace相當(dāng)于返回操作
后退鍵在各瀏覽器下默認(rèn)為點(diǎn)擊了一下后退按鈕，下面為大家介紹下如何實現(xiàn)實現(xiàn)IE下按backspace相當(dāng)于返回操作,需要的朋友可以參考下
2014-03-03
jQuery操作 input type=checkbox的實現(xiàn)代碼
jQuery操作 input type=checkbox的實現(xiàn)代碼，需要的朋友可以參考下，這邊腳本之家推薦大家看我們以前發(fā)布的文章
2012-06-06
基于jquery的動態(tài)創(chuàng)建表格的插件
工作快一年了,最近學(xué)習(xí)jquery，對jquery很感興趣。第一次寫博客，有不足之處還請各位拍磚。
2011-04-04
jquery實現(xiàn)圖片上傳前本地預(yù)覽
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)圖片上傳前本地預(yù)覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
用jquery與css打造個性化的單選框和復(fù)選框
利用jquery和css打造個性化的單選框和復(fù)選框,喜歡的朋友可以參考下。
2010-10-10