带滚动条的模态窗口

Question

所以，我在网站上有一个模态窗口，我正在开发。

模态是由纯CSS制作的，打开它并关闭它我有javascript函数改变css元素以使模态显示/隐藏。

模态的CSS：

<style>
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modalDialog > div {
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background:white;
    display: table;
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background: #00d9ff;
}

.btnEncomendarProduto {
    background-color:#D60E12;
    color:white;
    border-radius:5px;
    font-size: 12px;
    white-space:normal;
    cursor:pointer;
    text-transform: initial;
    border:1px solid #D60E12;
    margin-top:3px;
}
</style>

所以问题是，当我有一个显示太多关于模态的信息时，会发生这种情况：

所以我想我需要在模态内的div上有一个滚动条。我怎么能这样做？

谢谢。

Answer 1

如果您的内部div与实际模态的内容一起展开，则可以将该div的max-height设置为某些内容 - 例如75vh - 并添加{{1}转到该容器，当内容长于设置overflow-y: auto时，它会自动添加滚动条。

<强> HTML

max-height

<强> CSS

<div class="Content">
  <p>
    This is the page contents.
  </p>
</div>

<div class="Modal" id="modal">
  <div class="Contents">
    <h1>Modal</h1>
    <p id="text-area">
      [large amounts of content]
    </p>

  </div>
</div>

请注意body { padding: 0; margin: 0; width: 100%; height: 100%; } .Content { position: relative; width: 100%; } .Modal { position: fixed; display: none; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); // light grey background } .Modal.Open { display: block; } .Modal .Contents { overflow-y: auto; display: block; position: relative; width: 90%; margin: 5% auto 0; max-height: 90vh; padding: 5px; background: #fff; } 选择器及其工作原理。

JSFiddle示例： https://jsfiddle.net/nj6r0sjw/