jquery - 如何让固定的div动态占据整页

Question

这并不容易，因为占据整个页面的 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你可以在哪里测试我刚才说的。

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

有什么建议吗？

Answer 1

不是最好的解决方案，但它有效。您可以将 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% parent(占屏幕的三分之一)，因此这两个 closeModal 将填充另外三分之二。