web-dev-qa-db-fra.com

Le modal ne s'ouvre pas dans IE

J'essaie de faire en sorte que les modaux apparaissent avec des informations sur certains endroits sur une carte. Voici le code:

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

Et puis plus tard:

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

Cela fonctionne très bien dans Firefox et Chrome, mais dans IE (10), l’arrière-plan devient gris, mais le modal ne s’affiche pas. Des idées? Je me demande si le basculement de données n'est pas pris en charge dans IE.

internet-explorertwitter-bootstrapmodal-dialog
13
scalen121

IE ne supporte pas la classe "fade" pour les modaux, en supprimant fade i l'animation, mais le modal s'affiche dans les 3 navigateurs. J'ai trouvé la réponse ici: https://github.com/Twitter/bootstrap/issues/3672

20
scalen121

La réponse de @ scalen121 a fonctionné pour moi (l'animation fade provoque sa rupture). Cependant, j'ai eu un problème avec les corrections de code suggérées. 

Si vous souhaitez supprimer l'animation fade uniquement pour IE (elle ne semble pas fonctionner même sur IE11) mais la laisser pour les autres navigateurs, vous pouvez ajouter l'extrait de code:

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

Notez que la vérification IE ci-dessus n'est pas la même chose que l'ancien: $.browser.msie, qui renvoie undefined sur IE11 (testé avec jQuery 1.8.3 et 1.7.2).

12
Mark Rhodes

IE si triste. Mais vous pouvez ajouter un tag 

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

sur après la balise <html>. Cela fonctionnera .. et vous ne devriez inclure que bootstrap.min.js C'est assez.

3
Tinh Nguyen

Vous pouvez inclure le fichier transition.js au lieu de supprimer la classe de fondu. Cela fonctionne bien pour moi avec effet de fondu dans IE10

0
Sanera

Voici une autre solution sans modifier la disposition et le code d'amorçage initial: 

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

J'avais aussi le même problème aujourd'hui. Et après avoir retiré la classe de fondu, cela ne m'a même pas aidé. Ainsi, j'ai inspecté et trouvé un problème là-bas. Le bootstrap ne peut pas ajouter element.style{display:block;padding-right:12px;} (ici l'élément signifie .modal) dans IE. Et après avoir ajouté le css suivant a bien fonctionné:

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

Remarque: je n'ai pas eu besoin de supprimer la classe fade. Et l'animation fonctionne aussi très bien.

0
Bhojendra Rauniyar