2

我在我的 Web 应用程序上创建了一个弹出窗口，我使用了一些 jQuery 让它在单击特定位置时淡入淡出。我稍微工作的一个具体功能是，如果单击背景而不是框本身，则应用程序将关闭。

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

当在弹出框上方或下方单击背景时效果很好，但不是在它的左侧或右侧。奇怪的是，盒子周围没有容器，所以它不可能是另一个干扰背景点击的元素。

这是我在 HTML 中的 div 结构：

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

奇怪的是，我似乎看不出是什么导致了这种奇怪的点击效果！

4

2 回答 2

2

You shouldn't use the outdated <center> tag. It creates a block element around the popup's content that you don't see but on what you click when you click to the left or right of the content.

Replace it by some css and everything should be fine:

#selectorWindow {
    margin-left: auto;
    margin-right: auto;
    /* ... */
}

Demo: http://jsfiddle.net/Qs4wX/

于 2012-10-19T16:34:22.933 回答
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/

于 2012-10-19T16:34:00.160 回答