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

1.推荐写法

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

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

2.普通写法

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;  
}

你可能感兴趣的:(web前端,js点击空白,关闭弹窗,蒙层,隐藏弹窗)