简单起见，就不介绍问题背景了，遇到的问题如下： 可以看到遮罩将我想显示的模态框挡住了，而且因为被遮住的原因，在google浏览器中当模态框高度超过主窗口高度时虽然显示了滚动条，但无法滚动，而且默认设置下模态框被其他页面元素遮挡住了。 解决后的效果如下： 解决方法其实很简单，就是设置一下模态框的两个属性即可： 1、在模态框最外层div中设置样式中设置margin-top属性使对话框顶部保持间距，解决对话框高度超过范围时顶部被遮挡问题，在我的页面上，设置margin-top为28效果较好，具体情况需要根据页面布局不断进行尝试； 2、将data-backdrop属性设置为false以去掉遮罩。

这个问题耗费了一下午时间在网上找解决方法，但效果不理想，最后通过结合网上的解决方法以及bootstrap模态框的文档介绍，以及使用浏览器的开发者工具检查页面模态框的样式，最终发现了这个简洁的解决方法。

参考链接： 1、bootstrap 模态框弹出时被遮罩层挡住了，怎么解决 https://ask.csdn.net/questions/260668 2、菜鸟教程或bootstrap中文网 https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

菜鸟教程中的这个选项很重要！