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
  1. Nice!

    • Twinsens
    • May 20th, 2014

    Really thanks! You save my hours

      • ryanolson
      • May 20th, 2014

      No problem! It took me a while to figure it out and so I thought I would try to save others time 🙂

    • Alex
    • September 13th, 2014

    Thank you, very nice fix

  2. Çok aradığım içerikdi teşekkürler

  3. If you would like too improve your know-howjust keep visiting this site and be
    updated with the most up-to-date gossip posted here.

  1. January 7th, 2015
  2. January 8th, 2015

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: