Question

I created a pop up window on my web application, and I used some jQuery to have it fade in and out when specific places are clicked. One feature in specific I got working slightly is if the background is clicked and not the box itself, the application will close.

$("#fixedHoverBg").click(function(e){
    if(e.target == this)
    {
        $("#fixedHoverBg").fadeOut("slow");
    }
});

This works well when the background is clicked either above the pop up box or below it, but not to the left or right of it. Strangely enough, the box has no container surrounding it, so it can’t be another element that’s interfering with the clicking of the background.

Here is my structure of divs in HTML:

<div id='fixedHoverBg'>
<center>
    <div id='selectorWindow'>
        <!-- Content in here -->
    </div>
</center>

Css:

#fixedHoverBg {
    position: fixed;
    background - color: rgba(255, 255, 255, 0.85);
    z - index: 200000;
    width: 100 % ;
    height: 100 % ;
    top: 0;
    left: 0;
    display: none;
}

#selectorWindow {
    width: 730px;
    height: 600px;
    background: radial - gradient(ellipseatcenter, rgba(87, 179, 237, 1) 0 100 % ;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#57b3ed', endColorstr = '#328ee0', GradientType = 1);
    margin - top: 90px;
    border: 5px solid#ffae43;
    box - shadow: 0 0 0 6px white,
    0 0 20px 5px rgba(0, 0, 0, 0.4);
    border - radius: 5px;
    position: relative;
    display: block;
}​

Oddly enough, I can’t seem to see what’s causing this strange obtrusion of the click!

Answer 1

Your problem is that the <center> element si spanning the entire width of viewport (use Firebug or Developer Tools to check that). You can take care of that by modifying your click event selector to include that element as well:

$("#fixedHoverBg, #fixedHoverBg > center").click(function(e){
    if(e.target == this)
    {
        $("#fixedHoverBg").fadeOut("slow");
    }
});

Working demo here: http://jsfiddle.net/393CR/1/