17

地図上の特定の場所に関する情報を表示するモーダルを作成しようとしています。コードは次のとおりです。

<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 では data-toggle がサポートされていないのではないでしょうか。

4

6 に答える 6

20

IE はモーダルの「フェード」クラスをサポートしていません。フェードを削除するとアニメーションが失われますが、モーダルは現在 3 つのブラウザすべてに表示されます。ここで答えを見つけました: https://github.com/twitter/bootstrap/issues/3672

于 2013-05-02T22:54:34.183 に答える
14

@ scalen121 の答えは私にとってはうまくいきました（fadeアニメーションが原因で壊れます）。ただし、提案されたコード修正に問題がありました..

IE だけでアニメーションを削除したいfade(IE11 でも動作しないようです) が、他のブラウザーではそのままにしておきたい場合は、次のスニペットを追加できます。

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

上記の IE チェックは、IE11$.browser.msieで返される old: の実行と同じではないことに注意してくださいundefined(jQuery 1.8.3 および 1.7.2 でテスト済み)。

于 2014-01-03T12:25:24.237 に答える
4

ええ、とても悲しいです。ただし、タグを追加できます

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

<html>タグの後にオン。それはうまくいくでしょう。また、bootstrap.min.js のみを含める必要があります。それは十分だ。

于 2013-08-19T06:56:12.620 に答える
1

初期のブートストラップ レイアウトとコードを変更しない別のソリューションを次に示します。 

var $modalWrapper = $('#modalWrapper');
$modalWrapper.on('show.bs.modal', function () {
    $modalWrapper.toggleClass('in', true);
});
$modalWrapper.on('hidden.bs.modal', function () {
    $('.modal-backdrop.fade').remove();
});
于 2014-09-18T06:17:08.027 に答える
1

フェード クラスを削除する代わりに、transition.js ファイルを含めることができます。これは、IE10のフェード効果でうまく機能します

于 2015-02-25T10:26:31.453 に答える