Question

我使用一个非常简单干净的代码在我的页面中渲染一个模态：

<div class="modal">I'm the Modal Window!</div>

.modal {
    /* some styles to position the modal at the center of the page */
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    line-height: 200px;
    height: 200px;
    margin-left: -150px;
    margin-top: -100px;
    background-color: #f1c40f;
    text-align: center;

    /* needed styles for the overlay */
    z-index: 10; /* keep on top of other elements on the page */
    outline: 9999px solid rgba(0,0,0,0.5);
}

http://jsfiddle.net/c89Ls0av/

是否有一种干净可靠的方法可以检测到有人在模态外点击？

Answer 1

可能最简单的方法是将click事件绑定到body并查看它是否来自具有父元素的元素（e.target）（使用closest方法向上走树）.modal：< / p>

$(document).click(function(e) {
    if (!$(e.target).closest('.modal').length) {
        alert('click outside!');
    }
});

演示：http://jsfiddle.net/c89Ls0av/4/

顺便说一句，使用outline制作的叠加层是一个有趣的想法，但它不是真正的叠加层，因为它仍然允许与底层页面元素进行交互。以下是使用div容器覆盖整个页面的覆盖示例：http://jsfiddle.net/c89Ls0av/5/。当模态可见时，这个将阻止页面交互。

以下是开放/关闭功能如何一起使用的示例：http://jsfiddle.net/c89Ls0av/7/。

Answer 2

借助javascript框架，这非常简单。

请按照以下步骤操作：

将单击事件附加到关闭或隐藏模式的文档。
将单独的点击事件附加到停止点击传播的窗口。

示例：

$('html').click(function(){
    $('.modal').hide();
});
$('.modal').click(function(e){
    e.stopPropagation();
});

http://jsfiddle.net/c89Ls0av/3/

警告！ Stopping propagation可能会引入奇怪的行为

Answer 3

WithOut jQuery

document.addEventListener('click', function (e) {
  if(e.target.className === 'modal'){
     alert('clicked in');
  }else {
    alert('clicked out');
  }
}, false);

检查出来：
http://jsbin.com/totonopili/1/edit?html,css,js,output

Answer 4

Dfsq答案可以正常工作..但是如果你想要与对话框有关，你可以看看jQuery ui对话框。它为您提供了许多选项，可以根据需要配置对话框。

http://jqueryui.com/dialog/

如何检测css模态之外的点击？

4 个答案:

演示：http://jsfiddle.net/c89Ls0av/4/