如何使用jQuery正确地关注位于另一个滚动div之上的滚动div？

我有一个模式视图，其内容长度超过其边界，因此我设置了

overflow-y:scroll

。然而问题是模态视图位于主体的顶部，主体也启用了滚动功能，因此当我试图关注模态视图并滚动时，它有时会抓住主体并滚动，而不是模态视图。它似乎忽略了z索引值

有没有jQuery我可以用来只关注模态视图，而完全忽略它下面的任何内容

以下是modal div的html和css：

<div class="modal-window">
      <div class="modal-content">
        <div class="modal-image"></div>
        <ul class="modal-details">
          <li>Placeholder text</li>
          <li>Placeholder text</li>
          <li>Placeholder text</li>
          <li>Placeholder text</li>
          <li>Placeholder text</li>
        </ul>
      </div>
    </div>

.modal-window {
  position: fixed;
  z-index: 4;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 100px;
  width: 476px;
  height: 618px;
  border: 1px solid white;

}
.modal-content {
  position: relative;
  z-index: 4;
  height: inherit;
  width: inherit;
  overflow-y: scroll;
}

占位符文本
占位符文本
占位符文本
占位符文本
占位符文本

.模态窗口{
位置：固定；
z指数：4；
左：50%；
-webkit转换：转换（-50%，0）；
-ms转换：转换（-50%，0）；
转换：转换（-50%，0）；
顶部：100px；
宽度：476px；
高度：618px；
边框：1px纯白；
}
.模态内容{
位置：相对位置；
z指数：4；
身高：继承；
宽度：继承；
溢出y：滚动；
}

下面是一段视频，演示了这个问题：

---

正如你所看到的，它不仅仅关注于模态，它抓住下面的主体并滚动，有些点甚至忽略模态并与主体交互，我如何只关注模态，而完全忽略其下面的任何元素？

基本上你一次只需要一个滚动。

有两种方法可以做到这一点

• 当模态打开时，您可以通过添加overflow:hidden来禁用主体滚动；并且仅对模式容器使用滚动条

---

• 另一种方法是通过定位将主体内容从主体上下文中删除：固定并让模态使用主体滚动（此方法有助于避免页面抖动，第一种情况下通过添加和删除滚动来避免页面抖动）

基本上，一次只需要一个滚动。

有两种方法可以做到这一点

• 当模态打开时，您可以通过添加overflow:hidden来禁用主体滚动；并且仅对模式容器使用滚动条

---

• 另一种方法是通过定位将主体内容从主体上下文中删除：固定并让模态使用主体滚动（此方法有助于避免在第一种情况下通过添加和删除滚动来发生页面抖动）

需要一个

演示

，也需要您的代码！请在此处分享您的HTML和jquery代码…我们只提供建议，不提供功能检查更新问题@jiffcheck updated question@DhavalPatelneed a

demo

以及您的代码！请在这里分享您的HTML和jquery代码…我们只提供建议，不提供功能检查更新问题@jiffcheck updated question@dhavalpatel是否可以将您的解决方案转换为代码？我需要您的更多代码来检查如何触发模态等。是否可以将您的解决方案转换为代码？我需要更多检查如何触发模态等的代码。