Bootstrap模式问题 - 滚动被禁用
Car*_*ith 60 html jquery twitter-bootstrap
我有一个模态,在该模态中,有一个显示大隐藏内容的下拉列表,它正在工作.
现在,当您打开下一个模态,堆叠在第一个模态的顶部并将其关闭时,下方模态的滚动将被禁用.
我已经创建了一个完整的示例,包括复制我面临的问题的步骤.你可以在这里看到它.
<!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>
这是一个Bootply来显示行动中的行为:
Jak*_*lor 81
这也是一个解决方案
.modal {
overflow-y:auto;
}
http://www.bootply.com/LZBqdq2jl5
自动工作正常:)这实际上将修复任何运行高于您的屏幕大小的模态.
- 这个解决方案解决了我的问题，同时从jQuery`$（'。modal'）。css（'overflow-y'，'auto'）;`关闭和打开模态。 (2认同)
Mol*_*ain 46
这是因为当您关闭模态时,它会modal-open从<body>标记中删除它.Bootstrap不支持同一页面上的多个模态(至少在BS3之前).
使其工作的一种方法是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');
}
});
- （BS4）第一个答案我可以开始工作了，只需要对Bootstrap 4使用（$（'。modal.show'）。length> 0）。 (3认同)
- 最佳答案 (2认同)
小智 34
我找到了适合你的解决方案.我不确定为什么它不起作用但只有CSS中的一行代码才能解决问题.关闭第二个模态后,第一个模式正在overflow-y:hidden以某种方式得到.即使它设置为auto实际.
你需要重写这个并在CSS中设置你自己的声明:
#modal_1 {
overflow-y:scroll;
}
在这里你有一个工作的DEMO
编辑:错误链接,抱歉.
小智 15
对于引导程序 4，我必须添加 !Important
.modal {
overflow-y: auto !important;
}
如果不这样做，它就不起作用，也不会应用。
KAT*_*ath 11
$(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
- IMO这是最好的答案.为overflow-y添加额外的css:auto也可以,但如下所述,会产生双滚动条. (3认同)
- 也适用于 Bootstrap 4.1。赞赏 (2认同)
- 同意。测试了 2-3 个答案，这个适用于 Twitter Bootstrap 4.2.1。 (2认同)
小智 11
Bootstrap 不能同时支持多个模态。这是一个引导程序错误。只需为 BS4 添加以下脚本。
$('body').on('hidden.bs.modal', function () {
if($('.modal.show').length > 0)
{
$('body').addClass('modal-open');
}
});
小智 9
按照https://github.com/nakupanda/bootstrap3-dialog/issues/70添加
.modal { overflow: auto !important; }
对你的CSS
- 此解决方案将创建两个滚动条 (2认同)
首先，Bootstrap 不支持多个打开的模式。请参阅此处：Bootstrap Modal 文档
不支持多个打开的模式。确保不要在另一个仍然可见时打开模态。一次显示多个模态需要自定义代码。
但是，如果必须的话，您可以在自定义样式表中添加这一位 CSS，只要它包含在主 Bootstrap 样式表之后：
.modal {
overflow-y:auto;
}