Question

问题背景：

我有一个MVC应用程序，其数据通过jQuery呈现，然后附加到应用程序视图中的空div。叠加层附加到包含这些元素的div，并应覆盖所有视图。

问题：

我可以添加一个叠加层，它在视图中呈现，但是通过jQuery生成的元素没有被覆盖，它们位于叠加层的顶部，如图所示，而不是覆盖层下面 ：

可以看到正在渲染叠加层（用灰色表示），但元素位于其顶部。

守则：

叠加样式：

.overlay{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5); /*dim the background*/
}

将项目附加到的叠加容器：

<div id="myNav">
        <div id="containerId" class="container">
            <div class="topOffSet">
                <div class="col-lg-12">
                    <div id="itemHolder">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12 text-center">
                    <ul id="pagination-demo"></ul>
                </div>
            </div>
        </div>
    </div>

jQuery用于将模型项附加到上面的ItemContainer div：

           for(var g = 0; g < arrayLength; g++)
            {
                var urlImage = '@Url.Content("~/Images/")';

                var fullSourceImg = urlImage + pageItems[g].img;

                htmlToAdd += '<div class="col-lg-4">'+
                                '<div class="panel panel-default maxPanelHeight">'+
                                    '<div class="panel-heading textOverflow" id="panelHeading">'+
                                        '<h3 class="panel-title text-center"><b>'+pageItems[g].Title+'</b></h3>'+
                                    '</div>'+
                                    '<div class="panel-body">'+
                                        '<a href="'+pageItems[g].url+'" target="_blank"><img src="'+pageItems[g].Image+'" class="picHeight img-rounded img-responsive center-block" /></a>'+
                                        '<h4 class="text-center"><b>'+pageItems[g].Price+'</b></h4>'+
                                        '<h4 class="text-center"><a href="'+pageItems[g].url+'" class="btn btn-success" target="_blank">See More</a></h4>'+
                                        '<div class="text-center"><img class="originPic" src="'+fullSourceImg+'" /></div>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'
            }

            $('#itemHolder').append(htmlToAdd);

用于将Overlay类添加到myNav的代码：

 document.getElementById('myNav').className = 'overlay';

Answer 1

如果您只是更改容器元素的样式，它将无法工作。正如Taplar所说，它的孩子将始终处于最佳状态。您应该做的是创建另一个用作叠加层的元素，将其添加到容器中，为其提供绝对定位，宽度和高度为100％以及足够高的z-index。这将在元素上创建一个叠加层，从而创建动态添加的子元素。

Answer 2

试试这个 CSS ：

.overlay{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5); /*dim the background*/
}

.overlay .container,
.overlay .itemHolder  /*Just added temporary, you cna remove this */
{
  opacity: 0 !important;
}

Answer 3

如果我理解正确，您希望覆盖物覆盖产品。

在这种情况下，您需要创建一个单独的元素，而不是仅仅向包含产品的元素添加类。

这样的事情：

<div id="myNav">
   ...
</div>

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

然后在您的CSS中，使用#overlay并默认将其设置为display: none;，并在您想要显示时：

document.getElementById('overlay').style.display = 'block'

Answer 4

您的问题是，您生成的元素是<div id="myNav">的子元素。孩子将始终拥有与<div id="myNav">相同的z-index。

您必须在<div>旁边的<div id="myNav">放置在同一层级上，其z-index高于生成元素的div。我在下面更改了您的代码以实现此目的。

HTML：

        <div class="row">
            <div class="col-lg-12 text-center">
                <ul id="pagination-demo"></ul>
            </div>
        </div>
    </div>
</div>

CSS：

.overlay{
    display:none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    background-color: rgba(0,0,0,0.5); /*dim the background*/
 }
 #myNav{
    /*your styles*/
    z-index:1;
 }

每次你想淡入或淡出叠加时，都可以使用jQuery：

jQuery的：

$(".overlay").fadeIn(500) //500 means 500ms = 0.5 seconds
$(".overlay").fadeOut(500)

如果您想在叠加层顶部显示内容，只需将儿童添加到<div class="overlay">。

Answer 5

您需要解析文本。之前我做过类似的事情，并且样式不会应用于生成的元素。解决方案是创建一个像：

这样的元素

var elem = document.createElement('div');
elem.className = 'col-lg-4';
elem.innerHTML = '' + yourText;
container.appendChild(elem);

如果这对您不起作用，请告诉我，我将尝试搜索htmlparser脚本。

编辑：您甚至可以尝试innerHTML而不是appendChild文字。

叠加不会覆盖动态添加的元素

5 个答案: