2019-08-15 bootstrap的模态框被遮罩遮住[problem]

出现下面这种情况

问题

问题原因

  查找stackoverflow得到下面的信息：

答案

简单的说就是modal的父元素的css属性position为fixed或relative时，就会出现这种情况
其实bootstrap的官方文档也有提到：

模态框使用 position: fixed，在呈现上与其它元素相比有很大不同。请尽可能将弹出模态框的HTML放在顶级位置，以避免其它元素干扰，尤其是当另一个固定元素中也定义了 .modal 事件时，你可能会遇到问题。

解决方案

1.将模态框移出有position影响的块(我的做法是直接将模态框作为body的子元素)
2.将影响modal的元素属性position改成默认的，但这样很有可能影响最终布局，不太推荐。