jQuery/css div 不保持可见/总是淡出

Question

我在另一个容器中有一个容器，包裹在一个覆盖 div 中。所有三个容器都有不同的 z-indexes:

#overlay{
    display:none;
    position:fixed;
    _position:absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    background:#000;
    z-index:999;
}
#fuori{
    display:none;
    position:absolute;
    width:60%;
    z-index:1000;
}
#form_wrapper{
    position:relative;
    z-index:10001;
}

在链接上单击容器淡入，代码如下:

$(function () {
    $('body').on('click', '.animatedForm', function () {
        $('#fuori').fadeIn("slow").center();// .center() = function for centering div
        $("#overlay").css({
            "opacity": "0.7"
        }).fadeIn(500);
        return false;
    });
    $('#overlay,#fuori').on('click', function () {
        $('#fuori,#overlay').fadeOut("slow");

    });
});

问题是:即使我在 #form_wrapper 内部单击包含几个动态表单，#form_wrapper 和另一个消失，即使 z-indexes 是正确的。

我也试过

$('#overlay,#fuori').not('#form_wrapper').on('click',function() {

和

$('#overlay,#fuori:not(#form_wrapper)').on('click',function() {

但没有任何效果。

如何以正确的方式编写代码以使#form_wrapper 保持事件状态？

在此先感谢您帮助我。

编辑

@芭芭拉·莱尔德

这只是一个普通的形式

<div id="fuori">
<div id="form_wrapper" >

  <!-- form -->

 </div>

 </div>
  <div id="overlay"></div>

Answer 1

为什么不从您的点击淡出事件中删除#fuori 选择器？您的表单仍将与其大小相同(除非您在其他地方指定了表单宽度)；所以点击表单也可能会触发#fuori 的事件。