简单起见,就不介绍问题背景了,遇到的问题如下:
可以看到遮罩将我想显示的模态框挡住了,而且因为被遮住的原因,在google浏览器中当模态框高度超过主窗口高度时虽然显示了滚动条,但无法滚动,而且默认设置下模态框被其他页面元素遮挡住了。
解决后的效果如下:
解决方法其实很简单,就是设置一下模态框的两个属性即可:
1、在模态框最外层div中设置样式中设置margin-top属性使对话框顶部保持间距,解决对话框高度超过范围时顶部被遮挡问题,在我的页面上,设置margin-top为28效果较好,具体情况需要根据页面布局不断进行尝试;
2、将data-backdrop属性设置为false以去掉遮罩。
<!-- 模态框(Modal) -->
@*在模态框最外层div中设置样式中设置margin-top属性使对话框顶部保持间距,解决对话框高度超过范围时顶部被遮挡问题*@
@*将data-backdrop属性设置为false以去掉遮罩*@
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" data-backdrop="false" style="margin-top:28px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header pager-text-color" style="padding:10px 10px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
</div>
<div class="modal-body" style="height:1000px;">在这里添加一些文本</div>
@*<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>*@
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
这个问题耗费了一下午时间在网上找解决方法,但效果不理想,最后通过结合网上的解决方法以及bootstrap模态框的文档介绍,以及使用浏览器的开发者工具检查页面模态框的样式,最终发现了这个简洁的解决方法。
参考链接:
1、bootstrap 模态框弹出时被遮罩层挡住了,怎么解决 https://ask.csdn.net/questions/260668
2、菜鸟教程或bootstrap中文网 https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
菜鸟教程中的这个选项很重要!