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%，因此这两个{ {1}}将填补另外三分之二。

如何使固定div占据整页页面

1 个答案: