jQuery點擊自身以外地方關閉彈出層的簡單一實例

jQuery點擊自身以外地方關閉彈出層的簡單一實例

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

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

 

開發過程中經常有一些彈出層,彈出後要在點擊頁面其他地方時自動關閉,下面是實現代碼:

 

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樣式自己修改！