在Chrome背后的Bootstrap Modal [英] Bootstrap Modal sitting behind backdrop in Chrome
问题描述
我使用Twitter的引导,CSS和JS。
I'm using Twitter bootstrap, CSS and JS.
问题来自Modal插件,它在Firefox和IE上正常工作,但在Chrome中显示不好:模式成功弹出,但背后的模态背景,所以它不可能使用形式(包含在模态框)
The problem comes from the Modal plugin, it's working fine on Firefox and IE but displays bad in Chrome : the modal successly pop up, but behind the modal-backdrop so it's impossible to use the form (contained in the modal box)
您可以试试通过点击顶部右按钮:http://
You can have a try by clicking the top right buttons : http://
它在引导示例页面上工作正常( http://twitter.github.com/bootstrap/javascript.html#modals )所以我想它是从我的CSS
It's working fine on bootstrap example page ( http://twitter.github.com/bootstrap/javascript.html#modals ) so I guess it's coming from my CSS
I看起来无处不在,但我找不到任何可疑。
我错过了什么?
I've looked everywhere I could, but couldn't find anything suspicious. What did I missed ?
推荐答案
风格 -webkit-overflow-scrolling:touch ;
中的
部分#maincontainer
导致这种情况发生,因为它似乎与 overflow:auto
。
The style -webkit-overflow-scrolling: touch;
in section#maincontainer
is causing this to happen as it seems to be conflicting with overflow: auto
.
我认为 -webkit-overflow-scrolling:touch;
在使用固定定位的元素中提供触摸屏滚动溢出 - 所以我不认为你需要将它应用到节#maincontainer
。
I believe that -webkit-overflow-scrolling: touch;
is supposed to be used to provide touch screen scrolling overflow within elements that use fixed positioning - so I don't think you need to apply it to section#maincontainer
.
因为父母使用固定定位,内容可能会溢出,你可能会将它应用到 modal-body
。
You might however want to apply it to modal-body
as the parent uses fixed positioning and the content may overflow.
http://css-tricks.com/mobile-webkit-overflow滚动/
这篇关于在Chrome背后的Bootstrap Modal的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!