Bootstrap模态问题 - 滚动获取禁用 [英] Bootstrap Modal Issue - Scrolling Gets Disabled
本文介绍了Bootstrap模态问题 - 滚动获取禁用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
现在，当您打开下一个模式时，堆叠在一起在第一个模式的顶部，并解除它，在下面的模态滚动变为禁用。
我已经创建了一个完整的示例，包括复制我面临的问题的步骤。 此处。
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8>
< link href =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css =stylesheet>
< title>< / title>
< style>
< / style>
< / head>
< body>
< div class =modal fadeid =modal_1>
< div class =modal-dialog modal-sm>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modal>< span aria-hidden =true>& times;< / span>< span类= SR-仅 >关闭< /跨度>< /按钮>
< h4 class =modal-title>第一个模式< / h4>
< / div>
< div class =modal-body>
< form class =form>
< div class =form-group>
< label> 1）首先打开：< / label>
< input type =buttondata-toggle =modaldata-target =＃modal_2class =btn btn-primaryvalue =Open Modal 2>
< / div>
< div class =form-group>
< label> 2）在您打开上面的模式后更改此设置。< / label>
< select id =changeclass =form-control>
< option value =small>显示小内容< / option>
< option value =large>显示大内容< / option>
< / select>
< / div>
< div id =largeclass ='content-div'>
< label>大型Textarea内容..尝试并滚动到底部。< / label>
< / div>
< div id =smallclass ='content-div'>
< label>示例文本框< / label>
< input type =textclass =form-control>
< / div>
< / form>
< / div>
< div class =modal-footer>
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button>
< / div>
< / div>
< / div>
< / div>
< div class =modal fadeid =modal_2>
< div class =modal-dialog modal-sm>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modal>< span aria-hidden =true>& times;< / span>< span类= SR-仅 >关闭< /跨度>< /按钮>
< h4 class =modal-title>第二模态< / h4>
< / div>
< div class =modal-body>
< hp>这是堆叠的模式。关闭此模式，然后选择下拉菜单，您不能滚动...< / h5>
< / div>
< div class =modal-footer>
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button>
< / div>
< / div>
< / div>
< / div>
< / body>
< script src =http://code.jquery.com/jquery-1.11.0.min.jstype =text / javascript>< / script>
< script src =http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.jstype =text / javascript>< / script>
< script>
$（document）.ready（function（）{
$ b $（。content-div）。hide（）;
$ （#change）。change（function（）{
$（。content-div）。hide（）;
$（＃+ $（this）.val（）） .show（）;
}）;
}）;
< / script>
< / html>
以下是一个展示行为的Bootply：
解决方案
<我已经为你找到了解决方案。我不确定它为什么不起作用，但只有一行代码可以解决问题。在关闭第二个模式之后，第一个获取 overflow-y：hidden 以某种方式。即使其实际设置为 auto 。
您需要重写此代码并在CSS中设置自己的声明：
＃modal_1 {
overflow-y：scroll;
}
这里有一个工作 DEMO
编辑：错误的链接，对不起。
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:
解决方案
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:hidden somehow. Even if its set to auto actually.
You need to rewrite this and set your own declaration in CSS:
#modal_1 {
overflow-y:scroll;
}
Here you have a working DEMO
Edit: wrong link, sorry.
这篇关于Bootstrap模态问题 - 滚动获取禁用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
