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

最新推荐文章于 2023-04-24 16:14:32 发布

活在当下_未来可期

最新推荐文章于 2023-04-24 16:14:32 发布

阅读量3.7k

点赞数 1

分类专栏： web前端文章标签： js点击空白关闭弹窗蒙层隐藏弹窗

web前端专栏收录该内容

51 篇文章

订阅专栏

本文介绍两种弹窗控制方法，一种是使用jQuery简化DOM操作，通过鼠标点击事件判断点击位置是否在弹窗之外来控制弹窗的关闭；另一种是纯JavaScript实现，通过监听文档点击事件并结合元素显示状态控制弹窗的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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