twitter-bootstrap IE浏览器打不开模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16329980/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modal not opening in IE
提问by scalen121
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">×</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.
它在 Firefox 和 Chrome 中运行良好，但在 IE (10) 中，背景变为灰色，但不显示模态。有任何想法吗？我想知道 IE 是否不支持数据切换。
回答by scalen121
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
IE 不支持模态的“淡入淡出”类，通过去掉淡入淡出我失去了动画，但现在所有 3 个浏览器中都显示了模态。我在这里找到了答案：https: //github.com/twitter/bootstrap/issues/3672
回答by Mark Rhodes
@scalen121 's answer worked for me (the fadeanimation causes it to break). However, I had a problem with the suggested code fixes..
@scalen121 的答案对我有用（fade动画导致它中断）。但是，我对建议的代码修复有问题..
If you want to remove the fadeanimation just for IE (it doesn't seem to work even on IE11) but leave it for other browsers, then you can add the snippet:
如果您只想fade为 IE删除动画（它似乎在 IE11 上也不起作用）但将其留给其他浏览器，那么您可以添加代码段：
$(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 undefinedon IE11 (tested with jQuery 1.8.3 and 1.7.2).
请注意，上面的 IE 检查与旧的: 不同$.browser.msie，它undefined在 IE11上返回（使用 jQuery 1.8.3 和 1.7.2 测试）。
回答by Tinh Nguyen
IE so sad. But you can add tag
IE 好伤心。但是你可以添加标签
<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.
在<html>标签之后。它会起作用。你应该只包含 bootstrap.min.js。够了。
回答by seelts
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();
});
回答by Sanera
You can include transition.js file instead of removing the fade class. This works fine for me with fade effect in IE10
您可以包含 transition.js 文件而不是删除淡入淡出类。这对我来说很好用，在 IE10 中有淡入淡出效果
回答by Bhojendra Rauniyar
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:
我今天也遇到了同样的问题。删除淡入淡出类后甚至对我不起作用。因此，我进一步检查并发现了一个问题。引导程序无法element.style{display:block;padding-right:12px;}在 IE 中添加（此处元素表示 .modal）。添加以下 css 后工作正常：
.modal-open .modal {
display: block;
}
Note: I didn't need to remove the fadeclass. And the animation is also working fine.
注意：我不需要删除fade类。而且动画效果也很好。
