点击空白关闭弹窗

类似于模态框的操作,我们常常会用到这样的操作,除了点击弹出框的关闭按钮,我们还可以通过点击页面中非弹框的部分来关闭弹出框,这里给出两种思路与实现方法。

判断点击是否在目标区域

判断点击是否在目标区域的条件主要有两点:

  • 判断点击事件的对象不是目标区域对象
  • 判断点击时间的对象不是目标区域的子对象

下面是该方法的js代码实现:

1
2
3
4
5
6
7
dialog.click = funciton(e) {
var target = document.getElementById('target');
if (!target.isEqualNode(e.target) && !target.contains(e.target)) {
// your close dialog code
this.close();
}
}

通过添加一层使点击该层时处理事件

这个方法稍微麻烦一些但是也是弹窗的一种常见处理方式,主要是在弹窗与页面之间加一个背景层,可以选择透明或者显示灰色等,然后点击该背景层的时候关闭弹窗即可。

下面是该方法的js代码实现:

1
2
3
4
document.getElementById('background').click = function(e) {
//your close dialog code
dialog.close();
}