在开发应用中我们做了一个弹出层，有时我们会做一个关闭按钮，这样点击关闭就可以把弹出层关闭了，但是有时希望只要不点击弹出层内就自动关闭弹出层了，下面我总结了三个实例。
例1
代码如下:
点击空白处关闭弹出窗口$(function(){
$(document).bind("click",function(e){
var target = $(e.target);
if(target.closest(".pop").length == 0){
$(".pop").hide();
}
})
})
例2,点击自身以外地方关闭弹出层
代码如下:
$(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");
}
});
});
click
show-area
例3
代码如下:
jQuery点击空白处关闭弹出层$(function(){
$(".btn").click(function(event){
var e=window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
$("#box").show();
});
$("#box").click(function(event){
var e=window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
});
document.onclick = function(){
$("#box").hide();
};
})
打开我了,点空白关闭啊,谢谢
打开弹出层
下载本文
