Bootstrap模态框之奇葩事件

这几天在做Bootstrap的模态框时，遇到一个奇葩事件，最后用奇葩的方法解决了。

待我一一道来：

先看引入的CSS代码。在哪个文件夹放的，没有关系，不必在意。

期望的效果：

这是我的期望值。

而现在的情况是这样的：

只有在火狐浏览器下可以实现，而在谷歌、搜狗、win10自带IE却是这样的：

也就是说：遮罩把模态框给挡住了，你不能使用功能了。

在网上查阅后，没有解决办法，有人说是需要设置z-index:9999

实践后，没什么卵用。

问题来了:

1、难道是因为Bootstrap的Css样式和我前端整个页面样式冲突了？

     从官网摘了一个demo，加入到工程中，没有任何问题，如图：

     可用的模态，是官网demo,模态练习，是不能出现效果的界面。

2、官网的demo加进去没问题，为什么在另一个页面就有问题？

      于是我把整个页面加进不能出现效果的页面，发现官网的demo也不好使了。如图：

问题：难道是因为我用的不是最新的CSS样式？或者说加入的bootstrap样式和bootstrap-table样式不是同一版本，不匹配？

我从英文官网又下了新的样式文件引入，还是一样的效果,失败。

3、最笨的办法：我把官网那个demo引入模态练习页面，然后把它的样式一个一个给进添加，看看到底是哪个有问题。

这样就出现了上面的截图：

这么引入，就解决这个问题了。

难道和样式文件的压缩与非压缩有关么？我单独引入任何一个都不行，只有俩个同时引入，才能解决问题。

它们的引入顺序我也尝试过，没有任何关系。

也不知道是为什么，奇葩的问题，奇葩的解决方式。

希望有前端大神看到指点一下。

谢谢。