出现下面这种情况

问题原因
查找stackoverflow得到下面的信息:

简单的说就是modal的父元素的css属性position为fixed或relative时,就会出现这种情况
其实bootstrap的官方文档也有提到:
模态框使用 position: fixed,在呈现上与其它元素相比有很大不同。请尽可能将弹出模态框的HTML放在顶级位置,以避免其它元素干扰,尤其是当另一个固定元素中也定义了 .modal 事件时,你可能会遇到问题。
解决方案
1.将模态框移出有position影响的块(我的做法是直接将模态框作为body的子元素)
2.将影响modal的元素属性position改成默认的,但这样很有可能影响最终布局,不太推荐。
网友评论