欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

ie 不支持 bootstrap modal 模态对话框

I'm trying to make modals pop up with info about certain places on a map. Here is the code:

<area href="#modal_starthere" data-toggle="modal" title="Start Here" shape="poly" coords="431, 785, 500, 785, 501, 839, 432, 838" />

And then later:

<div id="modal_starthere" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4>Start Tour Here</h4>
    </div>  
    <div class="modal-body">
        <div class="row-fluid">
            <div class="span12" style="overflow: auto; height: 425px;">
                <p> <!-- FUTURE CONTENT --></p>
            </div>
        </div>
    </div>
</div>

It works great in Firefox and Chrome, but in IE (10) the background goes grey but the modal does not display. Any ideas? I wonder if maybe data-toggle isn't supported in IE.

 
   
which IE version – Arun P Johny May 2 '13 at 3:43
   
I'm using IE 10 – scalen121 May 2 '13 at 3:46
   
can you show a demo, such as on jsfiddle or a link to your own page? – David Storey May 2 '13 at 6:29
   
Note that this bug also can kick into play on Edge. – Will Lanni Nov 23 '16 at 23:09

5 Answers 正确答案 

IE does not support the "fade" class for modals, by taking out fade i lost the animation, but the modal displays in all 3 browsers now. I found the answer here: https://github.com/twitter/bootstrap/issues/3672

 
   
I tryed it out and if you add data-target="modal_starthere" and it works for me in your area – zeyorama May 2 '13 at 23:00
1 
Then why does the bootstrap example on their page work with fade in IE? edit: removing the fade doesn't do a thing either. -1 – WtFudgE Apr 3 '15 at 6:49

@scalen121 's answer worked for me (the fade animation causes it to break). However, I had a problem with the suggested code fixes..

If you want to remove the fade animation just for IE (it doesn't seem to work even on IE11) but leave it for other browsers, then you can add the snippet:

$(function () {
    var isIE = window.ActiveXObject || "ActiveXObject" in window;
    if (isIE) {
        $('.modal').removeClass('fade');
    }
});

Note that the above IE check is not the same as doing the old: $.browser.msie, which returns undefined on IE11 (tested with jQuery 1.8.3 and 1.7.2).

 
   
Note that this won't work for Edge. OP didn't mention Edge, and it probably wasn't even available at time of writing, but this note is for future people. – Will Lanni Nov 23 '16 at 23:08

IE so sad. But you can add tag

<meta http-equiv="X-UA-Compatible" content="IE=edge">

on after <html> tag. It's will work. And you should include only bootstrap.min.js. It's enough.

 
   
I had to tweak this to run in IE9 mode before it worked; <meta http-equiv="X-UA-Compatible" content="IE=9"> – keithl8041 Oct 21 '13 at 21:03

Here is another solution without modifying initial bootstrap layout and code:

var $modalWrapper = $('#modalWrapper');
$modalWrapper.on('show.bs.modal', function () {
    $modalWrapper.toggleClass('in', true);
});
$modalWrapper.on('hidden.bs.modal', function () {
    $('.modal-backdrop.fade').remove();
});
 

You can include transition.js file instead of removing the fade class. This works fine for me with fade effect in IE10

 

来自 https://stackoverflow.com/questions/16329980/modal-not-opening-in-ie

Modal windows do not display on Win8 RP & IE10 #3672

 Closed
kefs opened this issue on Jun 2 2012 · 29 comments

Comments


 
 

kefs commented on Jun 2 2012

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 commented on Jun 4 2012

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

 
 
 

LastRose commented on Jun 5 2012

This might have something to do with useragent?

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

 
 
 

kefs commented on Jun 14 2012

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

 
 

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.

 

This was referenced on Jul 6 2012

 
 

clowerweb commented on Jul 9 2012

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.

 
 

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

 
 

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.

 
 
 
Owner

fat commented on Jul 23 2012

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!

 

 fat closed this on Jul 23 2012

 
 

Thanks @owenversteeg! It worked! :)

 
 
 
Contributor

Yohn commented on Sep 26 2012

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

 
 

@anderslemke Awesome, you're welcome.

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

 
 

Thanks @owenversteeg but we need with animation effect

 
 
 

rafwell commented on Nov 26 2012

Please, we need animation.

Greetings from Brazil

 
 
 

nym commented on Nov 30 2012

What's the root cause?

 
 
 

rafwell commented on Nov 30 2012

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 commented on Dec 1 2012

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

 
 
 

nym commented on Dec 1 2012

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

 
 
 

rafwell commented on Dec 11 2012

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.

 
 

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 commented on Dec 13 2012

@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 commented on Dec 13 2012

@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!!

 
 

@rafwell @nym Thanks for updating on it.

 
 
 

smita786 commented on Mar 22 2013

thanks all.. solved my issue :-)

 
 

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

 
 
 

alerg11 commented on Apr 19 2013

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 commented on Apr 19 2013

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

 
 
 

sddaniels commented on Jun 6 2013

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 commented on Aug 1 2013

Thanks a lot guys for quick fix.

 
 

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

 

 cvrebert locked and limited conversation to collaborators on Jun 15 2014

 
 

This conversation has been locked and limited to collaborators.

Modal windows do not display on Win8 RP & IE10 #3672

 Closed
kefs opened this issue on Jun 2 2012 · 29 comments


来自  https://github.com/twbs/bootstrap/issues/3672

Comments


 
 

kefs commented on Jun 2 2012

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 commented on Jun 4 2012

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

 
 
 

LastRose commented on Jun 5 2012

This might have something to do with useragent?

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

 
 
 

kefs commented on Jun 14 2012

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

 
 

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.

 

This was referenced on Jul 6 2012

 
 

clowerweb commented on Jul 9 2012

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.

 
 

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

 
 

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.

 
 
 
Owner

fat commented on Jul 23 2012

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!

 

 fat closed this on Jul 23 2012

 
 

Thanks @owenversteeg! It worked! :)

 
 
 
Contributor

Yohn commented on Sep 26 2012

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

 
 

@anderslemke Awesome, you're welcome.

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

 
 

Thanks @owenversteeg but we need with animation effect

 
 
 

rafwell commented on Nov 26 2012

Please, we need animation.

Greetings from Brazil

 
 
 

nym commented on Nov 30 2012

What's the root cause?

 
@rafwell
 

rafwell commented on Nov 30 2012

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 commented on Dec 1 2012

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

 
 
 

nym commented on Dec 1 2012

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

 
 
 

rafwell commented on Dec 11 2012

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.

 
 

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 commented on Dec 13 2012

@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 commented on Dec 13 2012

@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!!

 
 

@rafwell @nym Thanks for updating on it.

 
 
 

smita786 commented on Mar 22 2013

thanks all.. solved my issue :-)

 
 

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

 
 
 

alerg11 commented on Apr 19 2013

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 commented on Apr 19 2013

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

 
 
 

sddaniels commented on Jun 6 2013

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 commented on Aug 1 2013

Thanks a lot guys for quick fix.

 
 

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

 

 cvrebert locked and limited conversation to collaborators on Jun 15 2014

 
 

This conversation has been locked and limited to collaborators.


 

Bootstrap Modal not working in IE



Bootstrap modal does not seem to be working for in both IE10 and IE11.

Here is my webpage:

http://flevy.com/fiaccabrino-selection-process

You can scroll to the bottom and click the "View Full Testimonial" buttons to test the modal. Once you click it, the screen grays out, but no modal pops up.

I tried to research this issue and found a solution recommending to remove the .fade class, but this did not work for me. You can see this code implemented on the page:

$(document).ready(function(){
    // fix for bootstrap modal in IE9+
    if($.browser.msie) {
        // if($.browser.version > 9)
        $('.modal').removeClass('fade');
    }
});

Versions we are using:

Bootstrap CSS: v2.0.0

bootstrap-modal.js: v2.0.4

jQuery: 1.7.1

Please let me know if you need more info.

 
 

I had the same issue, the proposed solution of removing the '.fade' class did not worked. In my case the bootstrap.min.js wasn't bundled thus the modal function wasn't recognized. After bundling the file all worked well.


来自  https://stackoverflow.com/questions/33174891/bootstrap-modal-not-working-in-ie


 

I am using Bootstrap modal dialog to show processing... message while working on long operation in the background. link for reference processing dialog.

It works absolutely fine with the Chrome browser but not working on IE.

 

$(function () {
        $("#upload").bind("click", function () {
            myApp.showPleaseWait();

            //Long operation includes multiple ajax calls.  

            myApp.hidePleaseWait()
        });
    });

var myApp;
myApp = myApp || (function () {
    return {
        showPleaseWait: function() {
             $('#pleaseWaitDialog').modal();
        },
        hidePleaseWait: function () {
             $('#pleaseWaitDialog').modal('hide');
        },
    };
})();

<html>
<body>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload"/>
   <div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-header">
            <h1>Processing...</h1>
        </div>
        <div class="modal-body">
            <div class="progress progress-striped active">
                <div class="bar" style="width: 100%;"></div>
            </div>
        </div>
    </div>
</body>
</html>

 

There is no error in browser console.

If I remove the dialog hide from the button click event, it works fine and dialog shown in IE as well but I want to hide the processing dialog after completion of long operation.

 

$(function () {
        $("#upload").bind("click", function () {
            myApp.showPleaseWait();

            //Long operation includes multiple ajax calls.  

            //myApp.hidePleaseWait() .... COMMENTED DIALOG HIDE...
        });
    });

 

 
1 
which version of IE did you choose? – dr_debug Mar 15 '16 at 8:58
   
I am using IE 11. – Pravin Dahale Mar 15 '16 at 9:05
   
there is similar question here, check it out stackoverflow.com/a/16349057/1677272 – dreamweiver Mar 15 '16 at 9:08
   
its not working for me. – Pravin Dahale Mar 16 '16 at 4:30

 

Know someone who can answer? Share a link to this question via emailGoogle+Twitter, or Facebook.

来自 https://stackoverflow.com/questions/36006501/bootstrap-modal-dialog-not-working-on-ie


普通分类: