jQuery Bootstrap 模式问题 - 滚动被禁用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28077066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Modal Issue - Scrolling Gets Disabled
提问by Carl Smith
I have a modal and within that modal, there is a dropdown that displays large hidden content, which is working.
我有一个模态，在该模态中，有一个下拉菜单显示大的隐藏内容，它正在工作。
Now when you open the next modal, stacked on top of the first modal and dismiss it, the scrolling on modal underneath becomes disabled.
现在，当您打开下一个模态，堆叠在第一个模态的顶部并将其关闭时，下方的模态滚动将被禁用。
I have created a full example, including the steps to replicate the issue I am facing. You can see it here.
我创建了一个完整的示例，包括复制我面临的问题的步骤。你可以在这里看到它。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<title></title>
<style>
</style>
</head>
<body>
<input type="button" data-toggle="modal" data-target="#modal_1" class="btn btn-lg btn-primary" value="Open Modal 1" >
<div class="modal fade" id="modal_1">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">First Modal</h4>
</div>
<div class="modal-body">
<form class="form">
<div class="form-group">
<label>1) Open This First: </label>
<input type="button" data-toggle="modal" data-target="#modal_2" class="btn btn-primary" value="Open Modal 2" >
</div>
<div class="form-group">
<label>2) Change this once you have opened the modal above.</label>
<select id="change" class="form-control">
<option value="small">Show Small Content</option>
<option value="large">Show Large Content</option>
</select>
</div>
<div id="large" class='content-div'>
<label>Large Textarea Content.. Try and scroll to the bottom..</label>
<textarea rows="30" class="form-control"></textarea>
</div>
<div id="small" class='content-div'>
<label> Example Text Box</label>
<input type="text" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal_2">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Second Modal</h4>
</div>
<div class="modal-body">
<hp>This is the stacked modal.. Close this modal, then chenge the dropdown menu, you cannot scroll... </h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(".content-div").hide();
$("#change").change(function() {
$(".content-div").hide();
$("#" + $(this).val()).show();
});
});
</script>
</html>
Here's a Bootply to show the behaviour in action:
这是一个 Bootply，用于显示实际行为：
回答by Jake Taylor
This is also a solution
这也是一个解决方案
.modal {
overflow-y:auto;
}
http://www.bootply.com/LZBqdq2jl5
http://www.bootply.com/LZBqdq2jl5
Auto works fine :) This will actually fix any modal that runs higher than your screen size.
自动工作正常:) 这实际上会修复任何运行高于屏幕尺寸的模式。
回答by Molkobain
This is because when you close a modal, it removes the modal-openfrom the <body>tag. Bootstrap doesn't support multiple modals on the same page (At least until BS3).
这是因为当您关闭模态时，它会modal-open从<body>标签中删除。Bootstrap 不支持同一页面上的多个模式（至少在 BS3 之前）。
One way to make it work, is to use the hidden.bs.modalevent triggered by BS when closing a modal, then check if there is anyother modal open in order to force the modal-openclass on the body.
使其工作的一种方法是hidden.bs.modal在关闭模态时使用由 BS 触发的事件，然后检查是否有任何其他模态打开以强制modal-open主体上的类。
// Hack to enable multiple modals by making sure the .modal-open class
// is set to the <body> when there is at least one modal open left
$('body').on('hidden.bs.modal', function () {
if($('.modal.in').length > 0)
{
$('body').addClass('modal-open');
}
});
回答by Kamil
I have found a solution for you. I'm not sure why it doesn't work but just one line code in your CSS will solve the problem. After closing second modal, the first one are getting overflow-y:hiddensomehow. Even if its set to autoactually.
我已经为您找到了解决方案。我不确定为什么它不起作用，但您的 CSS 中只有一行代码就可以解决问题。关闭第二个模态后，第一个模态越来越多overflow-y:hidden。即使它设置为auto实际。
You need to rewrite this and set your own declaration in CSS:
你需要重写这个并在 CSS 中设置你自己的声明：
#modal_1 {
overflow-y:scroll;
}
Here you have a working DEMO
在这里你有一个有效的DEMO
Edit: wrong link, sorry.
编辑：错误的链接，抱歉。
回答by KATJ Srinath
$(document).ready(function () {
$('.modal').on("hidden.bs.modal", function (e) { //fire on closing modal box
if ($('.modal:visible').length) { // check whether parent modal is opend after child modal close
$('body').addClass('modal-open'); // if open mean length is 1 then add a bootstrap css class to body of the page
}
});
});
//this code segment will activate parent modal dialog
//after child modal box close then scroll problem will automatically fixed
回答by truongpmcs
Follow https://github.com/nakupanda/bootstrap3-dialog/issues/70add
按照https://github.com/nakupanda/bootstrap3-dialog/issues/70添加
.modal { overflow: auto !important; }
to your css
到你的 css
回答by Manu Burrero Sánchez
For bootstrap 4 I had to add !Important
对于引导程序 4，我必须添加 !Important
.modal {
overflow-y: auto !important;
}
If this is not done, it does not work and it is not applied.
如果不这样做，它就不起作用，也不会应用。
回答by FastTrack
First off, multiple open modals are not supported by Bootstrap. See here: Bootstrap Modal docs
首先，Bootstrap 不支持多个打开的模式。请参阅此处：Bootstrap Modal 文档
Multiple open modals not supported. Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
不支持多个打开的模式。确保不要在模态仍然可见时打开模态。一次显示多个模态需要自定义代码。
But, if you must, you can add this bit of CSS in your custom stylesheet, as long as it's included afterthe main Bootstrap stylesheet:
但是，如果必须的话，您可以在自定义样式表中添加这一位 CSS，只要它包含在主 Bootstrap 样式表之后：
.modal {
overflow-y:auto;
}
回答by Sunny A
I solved the issue by removing data-dismiss="modal"and adding
我通过删除data-dismiss="modal"和添加解决了这个问题
setTimeout(function(){ $('#myModal2').modal('show') }, 500);
$('#myModal1').modal('hide');
Hope it helps
希望能帮助到你
回答by Joseph Marikle
I assume this is because of a bug in twitter bootstrap. It seems to remove the modal-openclass from the body even if two modals were open. You can shoe in a test for jQuery's removeClassfunction and bypass it if there's a modal still open (credit for the base function goes to this answer: https://stackoverflow.com/a/1950199/854246).
我认为这是因为 twitter bootstrap 中的一个错误。modal-open即使打开了两个模态，它似乎也会从正文中删除该类。您可以测试 jQuery 的removeClass功能并绕过它，如果有一个模式仍然打开（基本功能的功劳归于这个答案：https: //stackoverflow.com/a/1950199/854246）。
(function(){
var originalRemoveClassMethod = jQuery.fn.removeClass;
jQuery.fn.removeClass = function(){
if (arguments[0] === 'modal-open' && jQuery('.modal.in').length > 1) {
return this;
}
var result = originalRemoveClassMethod.apply( this, arguments );
return result;
}
})();
回答by Jared
Kind of a hack , but I like to just close and reopen it upon modal close to do away with any weird/unwanted behavior. If you have fade turned off then you cannot notice it closing and reopening:
有点像 hack ，但我喜欢在模态关闭时关闭并重新打开它，以消除任何奇怪/不需要的行为。如果您关闭了淡入淡出，则您不会注意到它正在关闭和重新打开：
var $ModalThatWasOnTop= $('#ModalThatWasOnTop')
$ModalThatWasOnTop.on('hidden.bs.modal', function(e) {
console.log('closing modal that was on top of the other modal')
$('#ModalThatWasCovered').modal('hide');
$('#ModalThatWasCovered').modal('show');
});
