在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屋！