blocks|key|774790|text|在Bootstrap.css中，将Modal的背景属性(position)从fixed更改为absolute|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|774791|entityMap^0|S|8|12|5|1A|8|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

In Bootstrap.css change the background attribute (<code>position</code>) of Modal from <code>fixed</code> to <code>absolute</code>

blocks|key|775036|text|为modal-body设置高度，而不是为整个模式设置高度，以便在模式覆盖上获得完美的滚动。我是这样运行的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|775037|.MyModal+{
++++height:+450px;
++++overflow-y:+auto;
}|code-block|syntax|javascript|775038|在这里你可以根据你的需要设置高度。|775039|entityMap^0|1|A|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

Set height for <code>modal-body</code> and not for the whole modal to get a perfect scroll on modal overlay. I get it work like this:

<pre><code>.MyModal {
 height: 450px;
 overflow-y: auto;
}
</code></pre>

Here you can set height as per your requirements.

blocks|key|558355|text|这就是我是如何用CSS覆盖一些类的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|558356|.modal+{
++height:+60%25;

++.modal-body+{
++++height:+80%25;
++++overflow-y:+scroll;
++}
}|code-block|syntax|javascript|558357|希望能对你有所帮助。|558358|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is how I did it purely with CSS overriding some classes:

<pre><code>.modal {
 height: 60%;

 .modal-body {
 height: 80%;
 overflow-y: scroll;
 }
}
</code></pre>

Hope it helps you.

blocks|key|558437|text|如果我没记错的话，在body上设置overflow:hidden并不能在我为移动网站构建的模式库测试的所有浏览器上工作。具体地说，我在阻止body滚动时遇到了麻烦，即使我在body上放了overflow:+had时，我也无法阻止body滚动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|558438|对于我现在的网站，我最终做了这样的事情。除了将页面主体上的"overflow“设置为"hidden”之外，它基本上只是存储您当前的滚动位置，然后在模式关闭后恢复滚动位置。这里有一个条件，当另一个引导模式打开时，其中一个已经处于活动状态。否则，代码的其余部分应该是自解释的。请注意，如果主体上的overflow:隐藏不会阻止给定浏览器的窗口滚动，这至少会在退出时设置回原来的滚动位置。|558439|function+bindBootstrapModalEvents()+{
++++var+$body+=+$('body'),
++++++++curPos+=+0,
++++++++isOpened+=+false,
++++++++isOpenedTwice+=+false;
++++$body.off('shown.bs.modal+hidden.bs.modal',+'.modal');
++++$body.on('shown.bs.modal',+'.modal',+function+()+{
++++++++if+(isOpened)+{
++++++++++++isOpenedTwice+=+true;
++++++++}+else+{
++++++++++++isOpened+=+true;
++++++++++++curPos+=+$(window).scrollTop();
++++++++++++$body.css('overflow',+'hidden');
++++++++}
++++});
++++$body.on('hidden.bs.modal',+'.modal',+function+()+{
++++++++if+(!isOpenedTwice)+{
++++++++++++$(window).scrollTop(curPos);
++++++++++++$body.css('overflow',+'visible');
++++++++++++isOpened+=+false;
++++++++}
++++++++isOpenedTwice+=+false;
++++});
}|code-block|syntax|javascript|558440|如果你不喜欢这样，另一种选择是将max-height和overflow:auto赋值给.mode-body，如下所示：|558441|.modal-body+{
++max-height:300px;
++overflow:auto;
}|558442|对于这种情况，您可以为不同的屏幕大小配置max-height，并为不同的屏幕大小保留overflow:auto。不过，您必须确保模式页眉、页脚和正文的总和不会超过屏幕大小，所以我会将这一部分包括在计算中。|558443|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

If I recall correctly, setting overflow:hidden on the body didn't work on all the browsers I was testing for a modal library I built for a mobile site. Specifically, I had trouble with preventing the body from scrolling in addition to the modal scrolling even when I put overflow:hidden on the body.

For my current site, I ended up doing something like this. It basically just stores your current scroll position in addition to setting "overflow" to "hidden" on the page body, then restores the scroll position after the modal closes. There's a condition in there for when another bootstrap modal opens while one is already active. Otherwise, the rest of the code should be self explanatory. Note that if the overflow:hidden on the body doesn't prevent the window from scrolling for a given browser, this at least sets the original scroll location back upon exit.

<pre><code>function bindBootstrapModalEvents() {
 var $body = $('body'),
 curPos = 0,
 isOpened = false,
 isOpenedTwice = false;
 $body.off('shown.bs.modal hidden.bs.modal', '.modal');
 $body.on('shown.bs.modal', '.modal', function () {
 if (isOpened) {
 isOpenedTwice = true;
 } else {
 isOpened = true;
 curPos = $(window).scrollTop();
 $body.css('overflow', 'hidden');
 }
 });
 $body.on('hidden.bs.modal', '.modal', function () {
 if (!isOpenedTwice) {
 $(window).scrollTop(curPos);
 $body.css('overflow', 'visible');
 isOpened = false;
 }
 isOpenedTwice = false;
 });
}
</code></pre>

If you don't like this, the other option would be to assign a max-height and overflow:auto to .modal-body like so:

<pre><code>.modal-body {
 max-height:300px;
 overflow:auto;
}
</code></pre>

For this case, you could configure the max-height for different screen sizes and leave the overflow:auto for different screen sizes. You would have to make sure that the modal header, footer, and body don't add up to more than the screen size, though, so I would include that part in your calculations.

blocks|key|774927|text|当使用带有skrollr的Bootstrap模式时，模式将变得不可滚动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|774928|修复了停止触控事件传播的问题。|774929|$('#modalFooter').on('touchstart+touchmove+touchend',+function(e)+{
++++e.stopPropagation();
});|code-block|syntax|javascript|774930|有关更多细节，请访问Add+scroll+event+to+the+element+inside+#skrollr-body|offset|length|774931|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/Prinzhorn/skrollr/issues/226^0|0|0|0|A|1G|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

When using Bootstrap modal with skrollr, the modal will become not scrollable. 

Problem fixed with stop the touch event from propagating. 

<pre><code>$('#modalFooter').on('touchstart touchmove touchend', function(e) {
 e.stopPropagation();
});
</code></pre>

more details at
<a href="https://github.com/Prinzhorn/skrollr/issues/226" rel="nofollow">Add scroll event to the element inside #skrollr-body</a>

blocks|key|774841|text|实际上，对于Bootstrap+3，您还需要覆盖body上的.mode-open类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|774842|++++body.modal-open,+
++++.modal-open+
++++.navbar-fixed-top,+
++++.modal-open+
++++.navbar-fixed-bottom+{
+++++margin-right:+15px;+/*<--+to+margin-right:+0px;*/
++++}|code-block|syntax|javascript|774843|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Actually for Bootstrap 3 you also need to override the .modal-open class on body.

<pre><code> body.modal-open, 
 .modal-open 
 .navbar-fixed-top, 
 .modal-open 
 .navbar-fixed-bottom {
 margin-right: 15px; /*&lt;-- to margin-right: 0px;*/
 }
</code></pre>

blocks|key|775000|text|我的iPhone6上的Mobile+Safari有这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|775001|Bootstrap在打开模式时将类.modal-open添加到主体中。|offset|length|style|CODE|775002|我已经尝试对Bootstrap+3.2.0进行最小限度的重写，并提出了以下建议：|775003|.modal-open+{
++++position:+fixed;
}

.modal+{
++++overflow-y:+auto;
}|code-block|syntax|javascript|775004|为了便于比较，我在下面包含了相关的Bootstrap样式。|775005|从bootstrap/less/modals.less中选择摘录(不要在修复中包含此内容)：|775006|//+Kill+the+scroll+on+the+body
.modal-open+{
++overflow:+hidden;
}

//+Container+that+the+modal+scrolls+within
.modal+{
++display:+none;
++overflow:+hidden;
++position:+fixed;
++-webkit-overflow-scrolling:+touch;
}

.modal-open+.modal+{
++overflow-x:+hidden;
++overflow-y:+auto;
}|775007|使用的移动Safari版本：User-Agent+Mozilla/5.0+(iPhone;+CPU+iPhone+OS+8_1+like+Mac+OS+X)+AppleWebKit/600.1.4+(KHTML,+like+Gecko)+Version/8.0+Mobile/12B411+Safari/600.1.4|775008|entityMap^0|0|H|B|0|0|0|0|0|0|E|41|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|L|7|16|8|@]|9|@]|A|$M|N]]|$1|U|3|V|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|X|$]]

I'm having this issue on Mobile Safari on my iPhone6

Bootstrap adds the class <code>.modal-open</code> to the body when a modal is opened.

I've tried to make minimal overrides to Bootstrap 3.2.0, and came up with the following:

<pre><code>.modal-open {
 position: fixed;
}

.modal {
 overflow-y: auto;
}
</code></pre>

For comparison, I've included the associated Bootstrap styles below.

Selected extract from bootstrap/less/modals.less (don't include this in your fix):

<pre><code>// Kill the scroll on the body
.modal-open {
 overflow: hidden;
}

// Container that the modal scrolls within
.modal {
 display: none;
 overflow: hidden;
 position: fixed;
 -webkit-overflow-scrolling: touch;
}

.modal-open .modal {
 overflow-x: hidden;
 overflow-y: auto;
}
</code></pre>

Mobile Safari version used: <code>User-Agent Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4</code>

blocks|key|775134|text|我也遇到了同样的问题，并找到了如下解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|775135|$('.yourModalClassOr#ID').on('shown.bs.modal',+function+(e)+{
++++$('+yourModalClassOr#ID+').css("max-height",+$(window).height());
++++$('+yourModalClassOr#ID+').css("overflow-y",+"scroll");++++++++++/*Important*/
++++$('+yourModalClassOr#ID+').modal('handleUpdate');

});|code-block|syntax|javascript|775136|100%25工作。|775137|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I had the same issue, and found a fix as below:

<pre><code>$('.yourModalClassOr#ID').on('shown.bs.modal', function (e) {
 $(' yourModalClassOr#ID ').css("max-height", $(window).height());
 $(' yourModalClassOr#ID ').css("overflow-y", "scroll"); /*Important*/
 $(' yourModalClassOr#ID ').modal('handleUpdate');

});
</code></pre>

100% working.

blocks|key|775323|text|.modal-body+{
++++max-height:+80vh;
++++overflow-y:+scroll;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|775324|对我来说很管用|unstyled|775325|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>.modal-body {
 max-height: 80vh;
 overflow-y: scroll;
}
</code></pre>

it's works for me

blocks|key|558744|text|当我们打开或关闭一个模式时，Bootstrap会在<body>标签中添加或删除一个css+"modal-open"。因此，如果您打开多个模式，然后关闭任意一个模式，那么打开模式的css将从body标记中删除。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|558745|但是滚动效果取决于modal-open中定义的属性"overflow-y:+auto;"|558746|entityMap^0|P|6|19|C|0|9|A|P|J|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

Bootstrap will add or remove a css <code>"modal-open"</code> to the <code>&lt;body&gt;</code> tag when we open or close a modal. So if you open multiple modal and then close arbitrary one, the modal-open css will be removed from the body tag.

But the scroll effect depend on the attribute <code>"overflow-y: auto;"</code> defined in <code>modal-open</code>

blocks|key|775275|text|我能够通过在.mode-body元素上使用带有max-height的"vh“度量来克服这个问题。70vh看起来很适合我的使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|775276|.modal-body+{
+++overflow-y:+auto;
+++max-height:+70vh;
}|code-block|syntax|javascript|775277|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I was able to overcome this by using the "vh" metric with max-height on the .modal-body element. 70vh looked about right for my uses.

<pre><code>.modal-body {
 overflow-y: auto;
 max-height: 70vh;
}
</code></pre>

blocks|key|775393|text|在Bootstrap+5中，使用classes:+change|type|unstyled|depth|inlineStyleRanges|entityRanges|data|775394|<div+class="modal-dialog">|code-block|syntax|javascript|775395|至|775396|<div+class="modal-dialog+modal-dialog-scrollable">|775397|另外，考虑添加类modal-dialog-centered。|offset|length|style|CODE|775398|entityMap^0|0|0|0|0|8|L|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

In Bootstrap 5, do it with classes: change
<pre><code>&lt;div class=&quot;modal-dialog&quot;&gt;
</code></pre>
to
<pre><code>&lt;div class=&quot;modal-dialog modal-dialog-scrollable&quot;&gt;
</code></pre>
Also, consider adding class <code>modal-dialog-centered</code> .

I'm trying to fit a lot of text into a modal box created using Twitter Bootstrap, but I'm having a problem: that content refuses to scroll.

I tried adding <code>overflow:scroll</code> and <code>overflow-y:scroll</code>, but to no avail; that merely causes it to display a scroll bar without actually enabling the scrolling.

What's the cause behind that and what can I do?

How to enable scrolling of content inside a modal?

我试图将大量文本放入使用Twitter Bootstrap创建的模式框中，但我遇到了一个问题:内容拒绝滚动。我尝试添加overflow:scroll和overflow-y:scroll，但都无济于事；这只会导致它显示滚动条，而不是实际启用滚动。这背后的原因是什么?我能做些什么？

问如何在模式中启用内容滚动？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在模式中启用内容滚动？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在模式中启用内容滚动？
EN