javascript - Css 模态框 z 索引不起作用

Question

我正在尝试构建简单的模式，但由于某些原因 z-index 不起作用。这里有什么问题？

document.addEventListener("DOMContentLoaded", function() {
  var aTag = document.querySelector('.img-box');

  aTag.addEventListener('click', function(e) {
    e.preventDefault();

    document.body.classList.add('overlay');

    var img = document.createElement('img'),
        modalBox = document.getElementById('modal-box')

    img.src = this.href;

    modalBox.appendChild(img);

  })
});

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.4;
  width: 100%;
  height: 100%;
}
#modal-box {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#modal-box img {
  max-width: 100%;
}

<a href="http://placehold.it/400x200" class="img-box">
  <img src="http://placehold.it/100x100" />
</a>

<div id="modal-box"></div>

备用演示:http://codepen.io/phpnetanel/pen/qEjJbo

Answer 1

问题是您将 .overlay 类添加到文档正文中。其余内容保存在文档正文中，因此位于顶部。创建一个新的 overlay div 并将其添加到 body 并对其应用 .overlay 类。

这是一个工作示例:http://codepen.io/anon/pen/EaXdKw