Question

（对不起我的英文）

我有一个弹出窗口（比如facebook上的通知）。我希望在点击页面的其余部分后隐藏它。

剂量应该按原样运作。

你能帮助我吗？

代码：

<div id="login">
...
</div>

CSS：

#login {
background-color:@windows;
position:absolute;
width:413px;
height:190px;
z-index:110;
left:-189px;
top:43px;
overflow:visible;
line-height:normal;
display:none;
}

要显示弹出窗口，我使用jquery fadeIn

JS：

    var active="";

function show_window(window) {
    hide_active_window();

    if(active==window) {
        active="";
        return;
    }

    active = window;

    $('#'+window).fadeIn(200);

    switch(window) {
        case 'login':
            $('#login_button').addClass("active");
            break;

    }
}

function hide_active_window() {
    if(active=="") return;

    $('#'+active).fadeOut(200);

    switch(active) {
        case 'login':
            $('#login_button').removeClass("active");
            break;

    }

}

Answer 1

<html>
<head>
</head>
<body >
<div id="popup">My Popup</div>
<div id="restOfThePage" onClick="document.getElementById('popup').style.display='none';">Rest of the page</div>
</body>

</html>

Demo

Answer 2

尝试以下JsFiddle

http://jsfiddle.net/arunberti/tY82H/

希望这是你的答案

Jquery的

$(document).mouseup(function (e)
{
    var container = $("#login");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

单击其余页面</div>后隐藏<div>弹出窗口

2 个答案: