单击外部关闭Div

Question

我目前正在设计一个网站，在该网站中，用户单击一个按钮，然后会出现带有各种内容的叠加层和框。 当用户单击关闭按钮或在框外单击时，框和所有内容都会淡出。 这是我已经产生的一些代码：

的HTML

<div id="overlay"></div>
<div id="specialBox">
    <p style="text-align: center">Special box content.</p>
    <button type="button" onmousedown="toggleOverlay()">Close Overlay</button>
</div>

的CSS

div#overlay {
    background: #000;
    display: none;
    height: 100%;
    left: 0px;
    position: fixed;
    text-align: center;
    top: 0px;
    width: 100%;
    z-index: 2;
}
div#specialBox {
    background: #fff;
    color: #000;
    display: none;
    position: absolute;
    z-index: 3;
    margin: 150px auto 0px auto;
    width: 500px;
    height: 300px;
    left: 425px;
}

的JavaScript

function toggleOverlay(){
    var overlay = document.getElementById('overlay');
    var specialBox = document.getElementById('specialBox');
    overlay.style.opacity = .8;
    if(overlay.style.display == "block"){
        overlay.style.display = "none";
        specialBox.style.display = "none";
    } else {
        overlay.style.display = "block";
        specialBox.style.display = "block";
    }
}

jQuery（语法可能不正确）

$('html').click(function() {
    if (document.getElementById('#specialBox').***IS_VISIBLE***) {
        $("#specialBox").fadeOut(300);
        $("#overlay").fadeOut(300);
    }
});

当您单击“新闻通讯”时，可以在http://www.madeon.fr上找到一个示例。 您既可以单击关闭按钮，也可以单击外部将其关闭。 现在，我的问题是如何通过工作实现这一目标？

Answer 1

我找出了主要问题。 我只是删除了jQuery，并添加了“ onmousedown ='toggleOverlay（）'”作为div＃overlay的属性。 然后，当我单击叠加层时，该框消失了。

这是新的HTML：

    <div id="overlay" onmousedown="toggleOverlay()"></div>

Answer 2

您可以通过以下方式实现：使用$(document).click

下面的jsfiddle可以为您提供帮助： http : //jsfiddle.net/jec7rmw6/2/

    function toggleOverlay(){
        if($("#specialBox").is(":visible"))
        {
            $('#specialBox').fadeOut(300);
        }
    }

    jQuery('#specialBox').click(
        function (e) { 
            e.stopPropagation();
        }
    );

    $(document).click(function() {
        if($("#specialBox").is(":visible"))
        {
            $('#specialBox').fadeOut(300);
        }
    });