Question

我在我的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;
}

奇怪的是，我似乎无法看到导致这种奇怪的咔嚓声的原因！

Answer 1

您不应使用过时的<center>标记。它会在您看不到的弹出窗口内容周围创建一个块元素，但会在您单击内容的左侧或右侧时单击的内容。

用一些css替换它，一切都应该没问题：

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

演示：http://jsfiddle.net/Qs4wX/

Answer 2

您的问题是<center>元素跨越视口的整个宽度（使用Firebug或Developer Tools来检查）。您可以通过修改单击事件选择器来包含该元素来处理这个问题：

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

此处的演示演示：http://jsfiddle.net/393CR/1/

使用e.target == this指定hitbox

2 个答案: