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

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

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

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

    $(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/。


    借助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/83045.html

    上一篇: How to detect clicks outside of a css modal?

    下一篇: Why pubnub javascript sdk (?) choses XHR over Websocket?