3

我有一个使用 Twitter Bootstrap 框架设置的模态登录窗口，完全按照http://twitter.github.com/bootstrap/javascript.html#modals中的描述（使用标记方法并使用他们的演示模态窗口作为起点）。它在多种浏览器上都能很好地工作（这是首先使用Bootstrap的重要原因之一）。

但是，当我在 Opera 中测试我的页面时，模式窗口不起作用。页面按原样淡出，但窗口不出现。为什么？

使用：Bootstrap v2.0.4，Opera 12

4

2 回答 2

7

这是 Bootstrap 中的一个已知错误，我确信正在修复中，但对于那些迫不及待或不能随便更改框架版本的人来说，这里有一个很好的修复：问题是由于模态窗口的典型标记中使用的“淡入淡出”类：

<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>

这将删除fadeOpera 的类，但为其他浏览器保留它。请注意，这将完全禁用 Opera，包括使用旧版本的人。如果您有兴趣缩小修复范围，您可以测试navigator.userAgent以确定版本（Opera 12 的用户代理标头Opera/9.80 (Windows NT 6.1; WOW64; U; en) Presto/2.10.289 Version/12.00在我的计算机上，但由于这不是通用的，您只想检查12.00字符串末尾的存在。也许勤奋且不那么困的人可以在评论中添加一个加强版:)

于 2012-07-21T05:58:31.690 回答
2

我建议使用modernizr之类的 $('.no-csstransforms3d .fade').removeClass('fade'); 东西

这样，如果例如 opera release opera 13 上面的代码将无法工作：P

能做.no-csstransforms3d .modal.fade

于 2012-08-17T06:51:54.140 回答