0

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

#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 内部单击，即使z-indexes 正确，#form_wrapper 和另一个也会消失。

我也试过

$('#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>
4

1 回答 1

0

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

于 2013-09-26T23:34:23.143 回答