Modal windows do not display on Win8 RP & IE10

[kefs]

Using the newly released Windows 8 Release Preview (05/31/2012) from here http://windows.microsoft.com/en-US/windows-8/iso, modal windows do not display, even on the bootstrap examples site, while using IE10 in desktop mode (haven't tested metro mode as it consistently crashes). The body overlay background appears, but no modal window (haven't tested without the slide in effect). You can click anywhere to regain page focus, but all clicking functionality is now disabled.

Obviously, IE10 and Windows 8 are both under rapid development, so I don't anticipate a fix until release, but I just thought this info should noted somewhere. I'm sure there are other issues, this was just the first one I noticed.

[cmelo72]

I am also looking for a proactive fix to this issue.

[LastRose]

This might have something to do with useragent?

Having a similar issue with firefox or chrome using a non-standard user-agent

[kefs]

Very possible.. just tested this on the newly released Opera 12.00 Build 1467 w32 and behavior is exactly the same as ie10.

[owenversteeg]

Yep, confirmed with Windows 8 64-bit, IE 10 Desktop. Confirmed as well with Opera 12.

This is very annoying - especially since Opera 12 has been out for some time now.

p.s. I also tested this on Metro and it has the exact same behavior.

[clowerweb]

Confirmed. Modal doesn't work in IE 10 or Opera 12. Further, the screen darkens, and once you click, it goes back to normal (as if the modal was dismissed), however nothing on screen is clickable. Seems like the overlay is staying on top (with opacity 0) and blocking all input until the page is refreshed. This is a really annoying bug, and makes it so that I cannot reasonably use TBS modals.

Hope this is fixed soon.

[AmauryCarrade]

Confirmed in Opera 12.00. I have exactly the same comportment as @clowerweb.

[owenversteeg]

Okay everyone! There is a fix! {forgive my excitement, but I'm glad for a fix}

If you don't need animations, you can simply remove the .fade class from your code and the modal will work.

[fat]

Hey @kefs,

Thanks for opening this issue! Unfotunately, it looks like it fails to pass the tests neccessary for submitting to bootstrap. The following tests are currently failing:

• should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!

[anderslemke]

Thanks @owenversteeg! It worked! :)

[Yohn]

would be nice if this bug could atcually get fixed without losing the fading effect..

[owenversteeg]

@anderslemke Awesome, you're welcome.

@Yohn I agree. @fat really needs to reopen this.

[maherelghali]

Thanks @owenversteeg but we need with animation effect

[rafwell]

Please, we need animation.

Greetings from Brazil

[nym]

What's the root cause?

[rafwell]

I do not know. See on my website: versiculosbiblicos.org, the link "Sobre Nós" is a modal. In Win IE 8 will not open when clicked. In other browsers work. In line browsers IE is slow, but in Win8 even opens.

[nym]

Okay, found out the root problem is addressed in the latest version of bootstrap-transition (msTransitionEnd is wrong).

[nym]

tl;dr: All you have to do to fix is update bootstrap-transition.js

[rafwell]

Thanks Nym, but I found my problem. I'm used the jquery 1.8.0, must be incompatible with this bootstrap version. This caused lag and this bug in modal. Now work fine, I've instaled the 1.8.3 version of jquery, with animation and fast.
Thanks for all!! Thanks from Brazil!

Sry for my bad english.

[nasirsher]

you can fix it in just a simple way using JQuery as in IE 9 it's working so for 10 use the below code
"if ( $.browser.msie ) { // if IE and version is greater 9

    if($.browser.version > 9)
    $('.modal').removeClass('fade');
}"

[nym]

@nasirsher That's the cludgy way to do it yes- if you update bootstrap-transition.js though you'll find it works without removing awesome transitions. Also having to write browser specific code like that is generally frowned upon.

[rafwell]

@nasirsher, the lastest version of bootstrap.js(2.1) + jQuery 1.8.3 make this. On IE9 the transition don't show, but open normally. On others versions work perfectly, on IE 10 for sample.

Thnx!!

[nasirsher]

@rafwell @nym Thanks for updating on it.

[smita786]

thanks all.. solved my issue :-)

[ashaegupta]

@nym awesome. wasn't ready to update my entire bootstrap.js, but just updating bootstrap-transition.js did the trick. much appreciated!

[alerg11]

Thank you all guys... I really needed to resolve an issue about it.
I put this in a general script:

$(function() {
if ($.browser.msie) {
$('.modal').removeClass('fade');
}
});

And it works perfect, this class "fade" is removing only when the user uses Internet Explorer, and so the modal shows up good in all browsers.
That is a solution if someone doesn't want (or can not) update the bootstrap or the jquery and need a fast solution.
It was my case.

[rafwell]

@alerg11, on my tests I've found the same problem in Opera and Safari... maybe from happening to you too.

[sddaniels]

On some of our older stuff we are still using boostrap 1.4.0 and I ran into this issue. I was able to fix it by changing the bootstrap-modal.js file to look like this:

    $.support.transition = (function () {
      var thisBody = document.body || document.documentElement
        , thisStyle = thisBody.style
        , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined
      return support
    })()

    // set CSS transition event type
    if ( $.support.transition ) {
      transitionEnd = "TransitionEnd"
      if ( $.browser.webkit ) {
        transitionEnd = "webkitTransitionEnd"
      } else if ( $.browser.mozilla || $.browser.msie ) {
        transitionEnd = "transitionend"
      } else if ( $.browser.opera ) {
        transitionEnd = "oTransitionEnd"
      }
    }

[shubelal]

Thanks a lot guys for quick fix.

[VictorLupan]

thank you all, it was of great use since for me as a newbie that was a hell of a challenge 👍