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

时间:2013-07-24 05:01:40

标签: javascript html

(对不起我的英文)

我有一个弹出窗口(比如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;

    }

}

2 个答案:

答案 0 :(得分:0)

<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

答案 1 :(得分:0)

尝试以下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();
    }
});