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);
    }
});

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

Answer 1

我找出了主要问题。我只是删除了我的jQuery并添加了＆＃34; onmousedown =＆＃39; toggleOverlay（）＆＃39;＆＃34;作为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);
        }
    });

关闭Div On Click Outside

2 个答案: