Posts Tagged ‘ ie support ’

How to get Twitter Bootstrap Modals working in Internet Explorer 7

Many of you out there have been tasked with getting a website running in Internet Explorer 7 or earlier.  It can very difficult depending on the web technologies that you are using.  In personal projects, I have decided to never support legacy internet explorer versions because it’s not worth it to me.  However, if you work at a large company, this could mean A LOT of money lost from potential clients or customers.  without further ado, let’s talk about Twitter Bootstrap Modals.

Twitter Bootstrap Modals

Twitter Bootstrap Modals are very nice to deal with, unless you need to support IE6 or IE7.  For the project I’m currently working on, I needed to get them to work in IE7 (I’m lucky to not have to support IE6.. phew..).  For some reason, the default functionality when you test them in IE7 is that the backdrop appears in front of your modal.  If you click on your modal (which is seen but clearly behind the backdrop), your modal is dismissed as though you clicked away from the modal.

The fix is simple.  In a script at the bottom of your page, you need to append your modals to the end of the body.  I’m not exactly sure why this works, but it does.  My theory, without looking much into the code, is that the backdrop is appended at the end of the body on load and is hidden by default and that since it’s at the end of the DOM, IE7 believes that it should be in the very front of all of your content (dispite z-index, which for some reason, it does not obey).

The Fix

Here is the fix that you should add after your document is ready:

$(".modal").appendTo($("body"));

Update:

If you are depending on the form that the modal is contained in, you may want to do something like this to ensure that the click of your submit button propagates to submit the correct form:

Note: I’m using $.each for brevity, I would not use $.each in the end product if you are using a lot of javascript on load.

var modals = $(".modals"),
    form,
    submitButtons;

$.each(modals, function(i, modal) {
    form = modal.closest("form");
    submitButtons = modal.find("input[type='submit']");

    if(form && submitButtons.length) {
        (function(localForm) {
            $.each(submitButtons, function(i, button) {
                button.on("click", function() {
                    localForm.submit();
                });
            });
        })(form);
    }

    modal.appendTo(body);
});

Hope this helps you get your modals working

Note: I’m not sure if this will work in IE6, but it’s worth a try.

Advertisements
%d bloggers like this: