Javascript HTML模态对话框溢出

我在一个网站上工作，当点击一个按钮时，它会显示一个模式对话框。我希望背景不可滚动，但对话框可滚动，这是我的代码。我认为该对话框应该嵌入另一个div中，

overflow

被设置为

auto

，但是这不起作用。有什么解决办法吗

更新

---

从这张图中，我希望红色区域可以滚动，而绿色区域不能滚动。

我相信我能够获得您试图实现的功能。看起来让你很难做到这一点的原因是你试图让一个滚动条跨越页面上的多个元素，而标记中没有可以应用CSS规则的元素。只需将所有要滚动的元素包装在一个容器中，并将该容器设置为

溢出：auto

（并从其他元素中删除溢出规则）

编辑

根据下面的评论，我更新了小提琴。与以前的想法相同，但现在可滚动包装器就是主体本身。这里只有一个问题是对话框was

position:fixed

上的CSS，但很显然，您无法滚动相对于视口定位的内容

---

我知道问题在于如何使用滚动条使模式对话框的标题垂直延伸，而不是整个内容

如果是这样，溢出方法是正确的；然而，溢出本身并不能单独起作用。Overflow喜欢有宽度和高度之类的朋友：）

因此，在您的例子中，您需要一个垂直溢出-overflow-y

y需要一个高度才能工作。你头的高度可能是55px（这是你必须决定的）

所以。将CSS添加到标题：

#dialog #title {
    overflow-y: auto;
    height: 55px;

}

---

Fiddle:

不确定问题出在哪里，我的屏幕上看起来一切都很好。我查看了JSFIDLE，但我仍然有点困惑您的目标是什么。我在Google Chrome上看到了这个，内容可以滚动，就像它应该在对话框中一样。你能再解释一下吗？所以你只是想让消息div不可滚动？@Xero谢谢你们试图帮助我！我已经更新了这个问题，并添加了一个图片来更准确地描述这个问题，谢谢@user1506980谢谢你们试图帮助我！我已经更新了这个问题，并添加了一个图片来更准确地描述这个问题，谢谢！这几乎就是我要做的，除了我会将滚动条添加到围绕模态的容器中，因此模态不会滚动，您可以在页面上围绕模态滚动。您好@user1506980，谢谢您的建议，我查看了您提到的小提琴，但这不是我想要的，我希望整个红色区域滚动，而不仅仅是其中的内容，有什么方法可以实现吗？谢谢@查德：这就是我真正想要实现的目标，你能用你用的小提琴贴出答案吗？谢谢@马修：好的，小提琴已经更新了。“如果这不是你要找的，请告诉我。”马修，我出去吃午饭了，看来是他抢先了我一步。如果你还需要做什么，请告诉我。