我有一个模态,在这个模态,有一个下拉列表显示大的隐藏内容,这是正常工作.
现在当您打开下一个模态时,堆叠在第一个模态的顶部,并将其关闭,下面的模态滚动将被禁用.
我创建了一个完整的例子,包括复制我面临的问题的步骤.你可以看到它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>
这是一个Bootply来显示行动的行为：
Bootply
解决方法
我找到了一个解决方案.我不知道为什么它不起作用,但CSS中的一行代码可以解决问题.关闭第二个模态后,第一个被越来越多的溢出：隐藏在某种程度上.即使它实际上设置为汽车.
你需要重写它,并在CSS中设置自己的声明：
#modal_1 {
overflow-y:scroll;
}
在这里你有一个工作DEMO
编辑：链接错误,对不起.