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

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

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

HTML程式碼：

複製程式碼 程式碼如下:

程式碼如下:
click

show-area

CSS代碼： .hide{display:none;}

JS程式碼

複製程式碼

程式碼如下:

程式碼如下:



程式碼如下:$("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樣式自己修改！