Question

我有一个包含一些内容的网页。然后我会弹出一个模态。

我遇到的问题是当我尝试滚动模态中的内容时只有滚动后面的内容。

这是CSS：

html, body {
    background: blue;
    margin: 0px;
}

/* Content Behind */
.content {
    width: 100%;
    background: red;
    z-index: 100;
}

/* Modal Above */
#modal {
    background: yellow;
    position: fixed;
    top: 10px;
    left: 50%;
    width: 400px;
    transform: translateX(-50%);
    z-index: 200;
    overflow: scroll;
    display: none;
    padding: 5px;
}

.show {
    display: block !important;
}

See Fiddle

由于

Answer 1

您没有为模态设置固定高度。

试试这个：

#modal {
    background: yellow;
    position: fixed;
    top: 10px;
    left: 50%;
    width: 400px;
    height: 400px; // Here you set the height of your choice
    transform: translateX(-50%);
    z-index: 200;
    overflow: scroll;
    display: none;
    padding: 5px;
}

Working fiddle

Answer 2

请参阅此fiddle

您尚未指定#modal的高度。请按以下步骤更新您的CSS

#modal {
    background: yellow;
    position: fixed;
    top: 10px;
    left: 50%;
    width: 400px;
    height:100%;     /*<<<<<<<<<specify height>>>>>>>>*/
    transform: translateX(-50%);
    z-index: 200;
    overflow: scroll;
    display: none;
    padding: 5px;
}

<强>更新

为防止模式打开时滚动后面的内容，您必须稍微更改一下Javascript。

请参阅更新后的fiddle。

更改JS如下

var bodyElems = document.getElementsByTagName("body");
var body = bodyElems[0];
body.style.overflow = "hidden";

document.getElementById('openModal').onclick = function () {
    document.getElementById("modal").className = "show";
    body.style.overflow = "hidden";

};

document.getElementById('closeModal').onclick = function () {
    document.getElementById("modal").className = "";
    body.style.overflow = "auto";
};

在模式div中滚动而不滚动整个页面

2 个答案:

请参阅此fiddle