为什么我的Bootstrap模态窗口在Opera浏览器中无法正常工作？

Question

我使用Twitter Bootstrap框架设置了一个模态登录窗口，具体方法与http://twitter.github.com/bootstrap/javascript.html#modals描述的一样（使用标记法，并以他们的演示模态窗口为起点）。它在多个浏览器上表现得非常好（这也是首选Bootstrap的重要原因之一）。

然而，在Opera浏览器中测试我的页面时，模态窗口无法正常工作。页面会像应该的那样变暗，但窗口不会出现。为什么呢？

使用：Bootstrap v2.0.4，Opera 12

- shiser

Answer 1

这是Bootstrap中一个已知的bug，我相信正在修复中，但对于那些等不及或不能随意更改框架版本的人来说，这里有一个好的解决方法： 问题是由于模态窗口的典型标记中使用了“fade”类。

<div id="myModal" class="modal hide fade in">

这个 fade 类为模态窗口的出现/消失提供了漂亮的动画效果。但在 Opera 12 中明显存在问题。

虽然移除 fade 类可以解决问题，但没有理由剥夺其他浏览器用户的体验，因此您可以使用这个方便的 JavaScript 片段：

<script type="text/javascript">
    $(document).ready(function()
    {
        if (navigator.appName == "Opera")
        {
            $('#myModal').removeClass('fade');
        }
    });
</script>

这将删除Opera的fade类，但对其他浏览器保留它。请注意，这将完全禁用Opera，包括旧版本的用户。如果你想缩小修复范围，可以测试navigator.userAgent来确定版本（我的计算机上Opera 12的用户代理标头是Opera/9.80（Windows NT 6.1; WOW64; U; en）Presto/2.10.289 Version/12.00，但由于这不是普遍存在的，所以你只需要检查字符串末尾的12.00是否存在。也许有些勤奋而不困倦的人可以在评论中添加升级版 :)

- shiser

---

由于在12.01版本中仍未修复，您可以使用以下代码：if (navigator.appName == "Opera" && navigator.userAgent.match(/Version\/12\./)) { - szeryf

当DOM准备就绪时，如果($.browser.opera)，则$('.fade')将被移除removeClass('fade')。 - Antoine

Answer 2

我建议使用Modernizr和类似于$('.no-csstransforms3d .fade').removeClass('fade');的代码，这样如果例如Opera发布了Opera 13，上面的代码就不起作用了:P。可以使用.no-csstransforms3d .modal.fade。

- WilliamStam

---

这是一个非常优秀且有用的方法，尽管如果他们已经在使用Modernizr的话，更新为能够正常工作的Bootstrap分支可能就和这个方法同样简单。我的方法旨在帮助那些（像我一样）在给定项目中受限于可以使用和更新的库的人们。但是额外的知识总是加加分 :) - shiser

问题在于当Opera突然发布3D变换时会发生什么...然后你又得再次编辑你的代码...我相信他们可能会将其添加到12.50版本中（但目前还没有）。我有最新的Bootstrap Git存储库...但在Opera Next中，如果没有上述的“修复”，它仍然无法正常工作。 - WilliamStam

请注意，当Google+首次推出时，它与Opera 12.50不兼容。解决方法是将浏览器字符串更改为Firefox等浏览器的镜像。因此，如果任何已经这样做的用户尝试使用Bootstrap，可能会遇到问题。我真的认为所有项目都应该包括Modernizr哈哈:P 它使开发变得非常容易。 - WilliamStam

我完全同意，Modernizr是一种福音，我已经在我的网站上多个地方使用它了。不过，在我研究它的时候，我无法确定哪些兼容性测试失败了（即要使用Modernizr进行测试），所以我采取了更加随意的方法。但是你提供的信息非常有用，谢谢。 - shiser