如何检测外部的CSS模式点击？

2018-06-04 12:33:16

这个问题在这里已经有了答案：

如何检测元素外的点击？ 76个答案

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

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

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

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

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

按着这些次序：

将点击事件附加到关闭或隐藏模式的文档。

将一个单独的点击事件附加到停止点击传播的窗口。

例：

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

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

警告！ 停止传播会引入奇怪的行为

Dfsq的答案将正常工作..但如果你想要对话框的东西你可能看看jQuery的ui对话框。它提供了很多选项，可以根据需要配置对话框。

http://jqueryui.com/dialog/

链接地址: http://www.djcxy.com/p/14703.html