Question

我有一个模态弹出窗口，当它加载的内容高于浏览器高度时，我无法向下滚动以查看其余信息。相反，背景可以滚动，但弹出窗口不会。

相反，我希望弹出窗口保持不变，当用户向上或向下滚动时，将弹出窗口保留在原位并让它们滚动到内容的底部。如果你在Facebook上做一个超长的帖子，弹出窗口工作正常，我想知道如何用这个控件获得同样的效果。

Answer 1

在你的模态弹出窗口的css中，设置modalpop的宽度，然后设置overflow:auto。那会给你水平滚动条。例如：

.ModalPopupPanel
{
  width:900px;
  overflow:auto;
}

因此，当内容宽度超过900px时，水平滚动条将显示出来。对于需要设置模态顶点高度的垂直滚动条也是如此。

Answer 2

当弹出窗口打开以隐藏滚动条时，您可以向body标签添加一个类，当弹出窗口消失时将其删除，然后您的背景应该是position：fixed，高度应该是window.height（）（用JS动态获取），也是溢出：auto。

如果弹出窗口比背景高，那么你会得到一个漂亮的滚动条，因为你的身体滚动条被隐藏了，你只能看到那个。此外，页面本身不会滚动。这就是Facebook用图片浏览器做的方式。

Answer 3

此脚本将弹出窗口高度设置为屏幕高度的90％，然后您可以设置overflow：auto;

<script type="text/javascript">
  function pageLoad() {
      $get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
  }
    </script>

这里是我提出的相关问题以及我找到的解决方案。

asp.net ModalPopupExtender : need to show scroll bar when overflow

Answer 4

将样式overflow: auto放在容器块上。

Answer 5

您可以尝试使用其竞争滚动modalpopup：设置PopupDragHandleControlID将其指向空面板，设置重新定位模式=“无”这将使模态固定在滚动页面的相同位置。

Answer 6

这里是简单且最佳的解决方案

将该类添加到模态弹出页面。

body.modal-open {
overflow: auto;
}

如何让模态弹出窗口滚动其内容与页面？

6 个答案: