jquery - 如何使固定div动态占据整个页面

这并不是完全容易的，因为占据整个页面的div并不是其顶部内容的包装。让我给你演示。

html看起来像这样：

.closeModal {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99;
  overflow: auto;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
}

.modal.contentModal {
  width: 35%;
  position: relative;
  margin: 5% auto;
  padding: 15px;
  border-radius: 5px;
  background-color: white;
  z-index: 10;
}

<div class="modal">
  <div class="closeModal"></div>
  <div class="contentModal"> RANDOM CONTENT INSIDE </div>
</div>

当用户单击按钮时，将弹出一个模式，但其高度未知，因为“ .contentModal”中的内容是动态的。

.closeModal的目的是占据.contentModal后面的区域，并且当用户在.contentModal之外单击时，它应该关闭.modal
我正在做的问题是，如果内容生成一个.contentModal，其高度大于屏幕高度，在该区域下，我单击但不会离开模态。

Plunker在这里您可以测试我刚才所说的内容。

滚动，然后单击页面底部的，您将看到它不会离开模式。

有什么建议么？

最佳答案

不是最好的解决方案，但是它可以工作。您可以将closeModal放在contentModal内，并有两个，一个在左边，另一个在右边。像这样：

HTML：

<div class="contentModal">
  <div class="closeModal left" ng-click="leaveModal()"></div>
  <div class="closeModal right" ng-click="leaveModal()"></div>
</div>

CSS：

.closeModal {
  position: absolute;
  top: 0;
  bottom: 0;
}

.closeModal.right {
  right: -100%;
  left: 100%;
}

.closeModal.left {
  right: 100%;
  left: -100%;
}

这是应用上述更改后的Plunker的更新分支。

注意：我将left和right指定为-100%，因为您已在其父级（屏幕的三分之一）上设置了35%，因此这两个closeModal将填充其他三分之二。