web-dev-qa-db-ja.com

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でデータ切り替えがサポートされていないのではないかと思います。

internet-explorertwitter-bootstrapmodal-dialog
15
scalen121

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

20
scalen121

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

IE（IE11でも機能しないようです）だけのfadeアニメーションを削除したいが、他のブラウザーに残したい場合は、スニペットを追加できます：

$(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でテスト済み）。

12
Mark Rhodes

IEはとても悲しい。しかし、タグを追加できます

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

後に<html> 鬼ごっこ。うまくいきます。また、bootstrap.min.jsのみを含める必要があります。それは十分だ。

3
Tinh Nguyen

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

0
Sanera

以下は、初期bootstrapレイアウトとコードを変更しない別のソリューションです。

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

今日も同じ問題がありました。そして、フェードクラスを削除した後、私にとってもうまくいきませんでした。したがって、私はさらに調査し、そこで問題を発見しました。 bootstrapはIEでelement.style{display:block;padding-right:12px;}（ここでの要素は.modalを意味します）を追加できません。また、次のcssを追加した後、正常に機能しました：

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

注：fadeクラスを削除する必要はありませんでした。そしてアニメーションもうまくいきます。

0
Bhojendra Rauniyar