JS点击空白关闭弹窗的两种方式

  1. 推荐写法
$(document).mouseup(function(e) { 
    var  pop = $('popDialog');  
    if(!pop.is(e.target) && pop.has(e.target).length === 0) { 
        // 可以在这里关闭弹窗
        some code... 
    }  
});  

判断点击事件发生在区域外的两个条件:
1,点击事件的对象不是目标区域本身
2,事件对象不是目标区域的子元素

  1. 普通写法
var btn = document.getElementById('btn');
var pop = document.getElementById('pop'); 
   
// 点击 btn 显示或隐藏弹窗   
btn.onclick = function()  {  
    if(pop.style.display === "none")  {
        pop.style.display = "block";  
    } else  {  
        pop.style.display = "none";  
    }  
}  
   
// 点击整个界面关闭弹窗 
document.onclick = function()  {
    div.style.display = "none";  
}  
   
// 防止点击弹窗也关闭弹窗,需要防止其关闭
pop.onclick = function()  {
    return false;  
}

你可能感兴趣的:(JS点击空白关闭弹窗的两种方式)