Модальное не открытие в IE

Я пытаюсь вывести модалы с информацией о некоторых местах на карте. Вот код:

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

Ответы

Ответ 1

IE не поддерживает класс "fade" для модалов, вызывая исчезновение, я потерял анимацию, но модальные дисплеи во всех трех браузерах теперь. Я нашел ответ здесь: https://github.com/twitter/bootstrap/issues/3672

Ответ 2

Ответ на

@scalen121 работал у меня (анимация fade заставляет его прерываться). Однако у меня была проблема с предлагаемыми исправлениями кода.

Если вы хотите удалить анимацию fade только для IE (она не работает даже в IE11), но оставить ее для других браузеров, вы можете добавить фрагмент:

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

Обратите внимание, что вышеуказанная проверка IE отличается от старой: $.browser.msie, которая возвращает undefined в IE11 (проверяется с помощью jQuery 1.8.3 и 1.7.2).

Ответ 3

IE так грустно. Но вы можете добавить тег

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

после тега <html>. Это будет работать. И вы должны включить только bootstrap.min.js. Это достаточно.

Ответ 4

Вот еще одно решение без изменения начальной компоновки и кода начальной загрузки: 

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

Ответ 5

Вы можете включить файл transition.js вместо удаления класса fade. Это отлично работает для меня с эффектом затухания в IE10