97

我的应用程序中有一个模态对话框，它在 y 方向上会变得很长。这引入了一个问题，即对话框的某些内容隐藏在页面底部之外。

在此处输入图像描述

我希望窗口滚动条在显示对话框时滚动对话框并且太长而不适合屏幕，但将主体留在模态后面的位置。如果您使用Trello，那么您就会知道我要做什么。

如果不使用 JavaScript 来控制滚动条，这可能吗？

这是迄今为止我应用于模态和对话框的 CSS：

body.blocked {
  overflow: hidden;
}

.modal-screen {
  background: #717174;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 50;
}

.dialog {
  background: #fff;
  position: fixed;
  padding: 12px;
  top: 20%;
  left: 50%;
  z-index: 10000;
  border-radius: 5px;
  box-shadow: 0, 0, 8px, #111;
}
4

11 回答 11

234

尝试：

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

它会安排你的模态，然后给它一个垂直滚动

于 2016-01-20T10:47:16.590 回答
46

这就是为我解决的问题：

max-height: 100%;
overflow-y: auto;

编辑：我现在使用 Twitter 上当前使用的相同方法，其中模式的行为有点像当前内容之上的单独页面，并且模式后面的内容不会随着您滚动而移动。

本质上是这样的：

var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
  marginRight: scrollBarWidth,
  overflow: 'hidden'
});
$modal.show();

使用模态上的这个 CSS：

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;

JSFiddle：https
://jsfiddle.net/0x0049/koodkcng/ 纯JS版本（IE9+）：https ://jsfiddle.net/0x0049/koodkcng/1/

无论页面或模态对话框的高度或宽度如何，这都有效，无论您的鼠标/手指在哪里都允许滚动，没有不和谐的跳转，某些解决方案在主要内容上禁用滚动，并且看起来也很棒。

于 2013-12-05T07:05:13.737 回答
15

改变position

position:fixed;
overflow: hidden;

到

position:absolute;
overflow:scroll;
于 2012-05-07T04:33:49.650 回答
6

这是我的模态窗口演示，它自动调整其内容的大小并在它不适合窗口时开始滚动。

模态窗口演示（见 HTML 源代码中的注释）

所有这些都只用 HTML 和 CSS 完成- 不需要 JS 来显示和调整模态窗口的大小（但当然你仍然需要它来显示窗口- 在新版本中你根本不需要 JS）。

更新（更多演示）：

关键是要有外部和内部 DIV，其中外部定义固定位置，内部创建滚动。（在演示中实际上有更多的 DIV 使它们看起来像一个实际的模态窗口。）

        #modal {
            position: fixed;
            transform: translate(0,0);
            width: auto; left: 0; right: 0;
            height: auto; top: 0; bottom: 0;
            z-index: 990; /* display above everything else */
            padding: 20px; /* create padding for inner window - page under modal window will be still visible */
        }

        #modal .outer {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 999;
        }

        #modal .inner {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: auto;       /* allow to fit content (if smaller)... */
            max-height: 100%;   /* ... but make sure it does not overflow browser window */

            /* allow vertical scrolling if required */
            overflow-x: hidden;
            overflow-y: auto;

            /* definition of modal window layout */
            background: #ffffff;
            border: 2px solid #222222;
            border-radius: 16px; /* some nice (modern) round corners */
            padding: 16px;       /* make sure inner elements does not overflow round corners */
        }
于 2014-04-16T14:23:54.687 回答
4

简单的方法，你可以通过添加这个 css 来做到这一点所以，你只是把它添加到 CSS 中：

.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}

它正在工作！

于 2018-11-25T07:21:41.313 回答
2

单独的固定定位应该可以解决该问题，但避免此问题的另一个好方法是将模态 div 或元素放置在页面底部而不是在您的站点布局中。大多数模态插件都给他们的模态定位绝对，以允许用户保持主页滚动。

<html>
        <body>
        <!-- Put all your page layouts and elements


        <!-- Let the last element be the modal elemment  -->
        <div id="myModals">
        ...
        </div>

        </body>
</html>
于 2013-11-17T17:22:52.070 回答
2

在这里..非常适合我

.modal-body { 
    max-height:500px; 
    overflow-y:auto;
}
于 2016-10-27T09:53:09.567 回答
1

position:fixed这意味着，模态窗口将相对于视点保持固定。我同意您的评估，即在这种情况下它是合适的，考虑到这一点，您为什么不向模式窗口本身添加滚动条？

如果是这样，正确的max-height和overflow属性应该可以解决问题。

于 2012-05-07T05:03:54.580 回答
0

最后，我不得不对模态屏幕后面的页面内容进行更改，以确保它永远不会有足够长的时间来滚动页面。

一旦我这样做了，我在应用到对话框时遇到的问题position: absolute就解决了，因为用户不能再向下滚动页面。

于 2012-05-23T14:05:44.283 回答
0

模式打开时可单击的窗口页面滚动条

这个对我有用。纯 CSS。

<style type="text/css">

body.modal-open {
padding-right: 17px !important;
}

.modal-backdrop.in {
margin-right: 16px; 

</style>

试试看，让我知道

于 2015-09-26T00:21:27.703 回答
-1

我想为这个动态宽度和高度的模态问题添加我的纯 CSS 答案。以下代码也适用于以下要求：

  1. 将模态框放在屏幕中央
  2. 如果模态高于视口，则滚动变暗（不是模态内容）

HTML：

<div class="modal">
    <div class="modal__content">
        (Long) Content
    </div>
</div>

CSS/少：

.modal {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: @qquad;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.7);
    z-index: @zindex-modal;

    &__content {
        width: 900px;
        margin: auto;
        max-width: 90%;
        padding: @quad;
        background: white;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
    }
}

这样，模态总是在视口内。模态框的宽度和高度可以随心所欲。为简单起见，我从中删除了关闭图标。

于 2018-08-21T09:30:44.887 回答