8

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

相反，我想让弹出窗口保持不变，当用户向上或向下滚动时，它将弹出窗口留在原处，让他们滚动到内容的底部。如果您在 Facebook 上发表超长帖子，弹出窗口可以正常工作，我想知道如何使用此控件获得相同的效果。

4

6 回答 6

5

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

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

因此，当内容宽度超过 900px 时，会出现水平滚动条。垂直滚动条也是如此，您需要在其中设置 modalpop 的高度。

于 2010-02-05T03:20:02.540 回答
3

您可以在弹出窗口打开时向 body 标签添加一个类以隐藏滚动条，并在弹出窗口消失时将其删除，那么您的背景应该是 position:fixed 并且高度应该是 window.height() （得到它用 JS 动态地），也是溢出：自动。

所有这一切发生的情况是，如果弹出窗口比背景高，您会在右侧看到一个漂亮的滚动条，并且因为您的身体滚动条是隐藏的，所以您只能看到那个滚动条。此外，页面本身不会滚动。这就是 Facebook 使用他们的图片查看器的方式。

于 2011-12-05T19:00:43.600 回答
2

此脚本将弹出高度设置为屏幕高度的 90%，然后您可以设置溢出：自动；

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

这是我问的一个相关问题和我找到的解决方案。

asp.net ModalPopupExtender：溢出时需要显示滚动条

于 2010-05-09T16:20:08.963 回答
0

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

于 2009-12-12T18:49:54.770 回答
0

您可以尝试使用它来滚动 modalpopup 及其内容：设置 PopupDragHandleControlID 将其指向一个空面板，设置 Reposition mode = "None" 这将在您滚动页面时将模态固定在同一位置。

于 2012-11-08T11:15:56.890 回答
-1

Here the simple and best working solution

Add that class to your modal popup page.

body.modal-open {
overflow: auto;
}

于 2015-12-20T13:12:20.027 回答