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

Question

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

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

使用:Bootstrap v2.0.4,Opera 12

Answer 1

这是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字符串末尾的存在.也许有人勤劳而且不那么困,可以在评论中添加一个加强版本:)