Question

我使用Twitter Bootstrap框架设置了一个模态登录窗口，完全如http://twitter.github.com/bootstrap/javascript.html#modals所述（使用Markup方法并使用他们的演示模态窗口作为起点）。它在多个浏览器上运行得非常好（这是首先使用Bootstrap的重要原因之一）。

然而，当我在Opera中测试我的页面时，模态窗口不起作用。页面会像它应该淡出，但窗口不会出现。为什么呢？

使用：Bootstrap v2.0.4，Opera 12

Answer 1

这是Bootstrap中的known bug，我确信修复工作正在进行中，但对于那些不能等待的人，或者不能随便改变框架版本，这里是一个很好的修复：问题是由于模态窗口的典型标记中使用的“淡入淡出”类：

<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。也许有些勤劳且不那么困的人可以在评论中添加加强版本：）

Answer 2

我建议使用modernizr等 $('.no-csstransforms3d .fade').removeClass('fade'); 而

这种方式如果例如opera释放opera 13上面的代码不能工作：P

可以.no-csstransforms3d .modal.fade

为什么我的Bootstrap模态窗口不能在Opera中运行？

2 个答案: