Question

I have a modal login window set up using the Twitter Bootstrap framework, exactly as described at http://twitter.github.com/bootstrap/javascript.html#modals (using the Markup method and using their demo modal window as a starting point).
It works wonderfully on multiple browsers (which is one of the great reasons to use Bootstrap in the first place).

However, when I test my page in Opera, the modal window is not working. The page fades out like it should, but the window does not appear. Why?

Using: Bootstrap v2.0.4, Opera 12

Answer 1

This is a known bug in Bootstrap, and I’m sure a fix is in the works, but for those of you who can’t wait, or can’t just change framework versions willy-nilly, here’s a nice fix:
The problem is due to the “fade” class used in the typical markup for the modal window:

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

This fade class provides the nice animation for the appearance/dismissal of the modal window. And it’s apparently broken in Opera 12.

While removing the fade class will make it work, there’s no reason to deprive other browser users, so you can utilize this handy snippet of Javascript:

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

This will remove the fade class for Opera, but retain it for other browsers. Note that this will disable it for Opera altogether, including people on older versions. If you’re interested in narrowing the scope of the fix, you can test navigator.userAgent to determine the version (the User Agent header for Opera 12 is Opera/9.80 (Windows NT 6.1; WOW64; U; en) Presto/2.10.289 Version/12.00 on my computer, but since that won’t be universal you’d just want to check for the presence of the 12.00 at the end of the string. Maybe someone industrious and less sleepy can add a souped up version in the comments 🙂