Modal not opening in IE

2019-01-09 12:11发布

站内问答 / 后端开发
475 6 5

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.

6条回答
forever°为你锁心
2楼-- · 2019-01-09 12:40

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

查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
3楼-- · 2019-01-09 12:47

@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).

查看更多
0人赞 添加讨论(0) 举报
Rolldiameter
4楼-- · 2019-01-09 12:47

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.

查看更多
0人赞 添加讨论(0) 举报
放我归山
5楼-- · 2019-01-09 12:49

I was also having same problem today. And after removing the fade class didn't work for me even. Thus, I further inspected and found an issue there. The bootstrap isn't able to add element.style{display:block;padding-right:12px;} (here element means .modal) in IE. And after adding the following css worked fine:

.modal-open .modal {
  display: block;
}

Note: I didn't need to remove the fade class. And the animation is also working fine.

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
6楼-- · 2019-01-09 12:55

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();
});
查看更多
0人赞 添加讨论(0) 举报
在下西门庆
7楼-- · 2019-01-09 13:01

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)