Javascript 当modal打开时，停止在正文上滚动，并允许在modal DIV上滚动

当我打开一个模式时，我可以向下滚动到页面主体，但是我不能向下滚动模式来查看所有数据，只有后台站点在滚动，你知道如何停止在后台主体上滚动，但允许在模式本身上滚动吗

这是我的css：

.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 10000px;
    background-color: /* rgba(0, 0, 0, .5); */rgba(43, 46, 56, 0.9);
    transition: opacity .3s ease;

}


.modal-container {
    box-sizing: border-box;
    width: 75%;
    z-index: 10000;
    /* max-height: 650px; */
    overflow: auto;
    margin: 0px auto 0;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    font-family: Helvetica, Arial, sans-serif;
    -webkit-overflow-scrolling: touch;

}

模态html：

<div class="modal-mask" @click="$emit('close')" v-show="show" transition="modal">
        <div @click.stop class="modal-container">

            <button @click="$emit('close')"><i class="fa fa-chevron-left" aria-hidden="true"></i>
            </button>
            <div class="modal-header">
                <h2>Title</h2>
            </div>

            <div class="modal-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>

            <div class="modal-footer text-right">
                <!-- <button class="modal-default-button">
                    Close
                </button> -->
            </div>
        </div>
    </div>

---

我尝试在打开模式时将溢出：隐藏添加到主体，但它确实取消了主体上的滚动，但仍然无法在模式上滚动。您可以将主体的样式设置为溢出：隐藏这会使滚动消失，然后，您只需在div中设置模式，使其溢出为scroll或auto，并基本上使模型可滚动。

---

记住，模式父项应该是位置：固定的，其宽度和高度应该是100%。

使用jQuery/JS在打开模式时修改主体的溢出，可以使其停止滚动，并且模式仍然可以滚动

此解决方案的关键方面包括：

模式有溢出：滚动；设置 主体设置为溢出：隐藏；当模态打开时。 我模拟了一个非常简单的示例，如下所示：

$。单击。单击函数{ $'.modal'.show； $'body'.cssoverflow，隐藏； }; .内容{ 高度：700px； 宽度：100%； 背景：灰色； } .点击{ 背景：蓝色； 光标：指针； } .莫代尔{ 位置：绝对位置； 宽度：100px； 高度：100px； 背景：红色； 最高：50%； 左：50%； 转化：转化-50%，-50%； 显示：无； 溢出：滚动； } 这是滚动直到打开模式的主要内容。 单击我打开模态 这是一个模式，需要我向下滚动，因此这里有很多占位符文本，我必须键入我应该使用Lipsum的man。

---

我将您的代码复制到一个JSFIDLE中并使用它，它工作得很好，但无法与我的代码一起使用，也许您在我的代码中看到了一些可能会阻止它的东西吗？谢谢，这是正确的答案，与上面示例中的示例代码相同，因此我突出显示了该示例，谢谢您的帮助