Question

bootstrap 模态框弹出时被遮罩层挡住了，怎么解决

Answer 1

bootstrap 模态框弹出时被遮罩层挡住了是设置错误造成的，解决方法为：

1、打开WebStorm开发工具，新建‘test.html’文件，并在文件同级目录安装部署Bootstrap相关文件，目录结构如下图。

2、在‘test.html’中写如下代码。

3、网页查看效果如下图，这时点击按钮还没有相应，因为没有对应的代码。

4、修改‘test.html’代码如下。

5、网页查看效果，点击按钮，可以正常弹出模态框，点击网页其他位置模态框消失。

6、在模态框上增加取消按钮，点击取消后模态框消失，代码如下。

Answer 2

bootstrapt modal 官网解释：网页链接

通俗的讲，就是你的modal必须符合它的dom添加规则。给两个例子，就知道了。

正确显示：

modal定义在body下，在最后添加一行遮罩，正确显示；

错误例子：

同样在最后添加一行遮罩，但是此时被覆盖了。

原因：

正确部分的dom结构：

错误部门的dom结构：

解决方法：

取消自动添加遮罩，手动添加遮罩代码

在模态框启动是在对应位置添加遮罩代码，如：

Answer 3

设置下模态框的z-index属性值，style="z-index:99999"

Answer 4

使用js代码实现如下
$('.modal-open').find('.modal-backdrop').remove();
因为遮挡主要是modal-backdrop类导致的问题。