Question

我正在尝试弹出模式，其中包含有关地图上某些地方的信息。这是代码：

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

然后是：

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

它在Firefox和Chrome中运行良好，但在IE（10）中，背景变为灰色，但模式不显示。有任何想法吗？我想知道IE中是否支持数据切换。

Answer 1

IE不支持模式的“淡入淡出”类，通过取出淡入淡出我丢失动画，但现在所有3个浏览器中的模态显示。我在这里找到了答案：https://github.com/twitter/bootstrap/issues/3672

Answer 2

@ scalen121的回答对我有用（fade动画导致它破坏）。但是，我对建议的代码修复有问题..

如果你想删除仅适用于IE的fade动画（它似乎在IE11上似乎不起作用），但是留给其他浏览器，那么你可以添加片段：

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

请注意，上面的IE检查与旧的$.browser.msie不同，后者在IE11上返回undefined（使用jQuery 1.8.3和1.7.2进行测试）。

Answer 3

IE很难过。但是你可以添加标签

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

在<html>标记之后

。它会起作用。你应该只包括bootstrap.min.js。这就够了。

Answer 4

这是另一种不修改初始引导程序布局和代码的解决方案：

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

Answer 5

您可以包含transition.js文件，而不是删除淡入淡出类。这对我来说在IE10中具有淡入淡出效果

Answer 6

我今天也遇到同样的问题。在删除淡入淡出类之后，甚至对我也不起作用。因此，我进一步检查并发现了一个问题。引导程序无法在IE中添加element.style{display:block;padding-right:12px;}（此处的元素表示.modal）。在添加以下CSS之后效果很好：

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

注意：我不需要删除fade类。而且动画效果还不错。

模态不在IE中打开

6 个答案: