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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,511评论 25 708
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,813评论 1 92
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,370评论 0 8
  • 第2章 苏一铭,你好傻 原来岁月也可以像流沙一样飞快的流逝,从被人嫌弃打骂的邋遢鬼长到了现在的默默无闻的寻常女孩,...
    dc0b1248379c阅读 373评论 0 0
  • 这个世界什么是最公平的?时间。这个世界什么是最不公平的?时间。说时间是最公平的,因为每个人不管贫穷富贵每天拥有的都...
    Vivian思朦阅读 931评论 0 2