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

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

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

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

開(kāi)發(fā)過(guò)程中經(jīng)常有一些彈出層,彈出后要在點(diǎn)擊頁(yè)面其他地方時(shí)自動(dòng)關(guān)閉,下面是實(shí)現(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，自己本地測(cè)試下吧，css樣式自己修改！

您可能感興趣的文章:

相關(guān)文章

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