1

(Sorry for my english)

I got a popup (like notifications on facebook). I wish it hidding after clicking on rest of the page.

dosent work as is should.

Can you help me?

Code:

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

To show popup i use 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;

    }

}
rafal235
  • 691
  • 2
  • 7
  • 17

2 Answers2

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

Hossam Oukli
  • 1,296
  • 3
  • 19
  • 42
0

Try the following JsFiddle

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

Hope this is your answer

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();
    }
});
Arun Bertil
  • 4,598
  • 4
  • 33
  • 59