Comment modifier la largeur d'une modale Bootstrap 3 dans IE8 ?

Question

Je dois prendre en charge IE8. La modale elle-même fonctionne bien, mais mes tentatives pour la redimensionner (qui fonctionnent bien dans Firefox) ne fonctionnent pas dans IE8.

Je me contente d'ajouter une classe (wide-modal dans cet exemple) à la division modal-dialog (la deuxième imbriquée dans la structure Bootstrap) et d'appliquer une largeur via CSS, rien de bien compliqué.

HTML :

       <div class="modal fade" id="modalTest" role="dialog">
            <div class="modal-dialog wide-modal">
              <div class="modal-content ">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title">Testing Modal</h4>
                </div>
                <div class="modal-body">
                  <img src="content/Example-Infographic.jpg" width="100%" />
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>

CSS :

.wide-modal {
    width: 60%;
}

J'ai essayé d'ajouter la classe à la division supérieure et inférieure, sans effet (positif). Cela fonctionne comme un charme là où c'est dans Firefox, mais aucun effet du tout dans IE8. J'ai également essayé avec une largeur de px, aucune différence. La bibliothèque respond.js est en place, donc en général, IE8 se comporte autrement que cela.

Answer 1

Dans bootstrap 3, vous devez assigner la largeur pas à .modal mais à .modal-dialog

#modalTest .modal-dialog
{
    width: 500px; /* your width */
}

Answer 2

J'ai utilisé une combinaison de CSS et de jQuery, ainsi que les conseils donnés sur cette page, pour créer une largeur et une hauteur fluides à l'aide de Bootstrap 3. Je l'ai également testé sous IE8 sur Win7, et cela fonctionne parfaitement.

Tout d'abord, quelques feuilles de style CSS pour gérer la largeur et la barre de défilement facultative de la zone de contenu.

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

Et ensuite un peu de jQuery pour ajuster la hauteur de la zone de contenu si nécessaire.

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

Le texte complet et le code sont disponibles à l'adresse suivante http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

Answer 3

Je sais qu'il est tard mais je viens de trouver dans docs bs3 vous pouvez ajouter modal-lg à vos modales

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
  Large modal
</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
     ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
  Small modal
</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-sm">
   <div class="modal-content">
     ...
   </div>
 </div>
</div>

Answer 4

Cela modifiera bien sûr la largeur de toutes vos fenêtres modales, mais cela vous donnera une meilleure idée de la façon dont cela fonctionne. Je viens de modifier mes fenêtres modales de cette façon.

    .modal-body {
        position: relative;
        padding: 20px;
        min-width: 800px; /* SET THE WIDTH OF THE MODAL */
    }

    .modal-content {
        position: relative;
        background-color: #fff;
        border: 1px solid #999;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 6px;
        outline: 0;
        -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);
        box-shadow: 0 3px 9px rgba(0,0,0,0.5);
        background-clip: padding-box;
        width: 900px; /* SET THE WIDTH OF THE MODAL */
        margin: 50px 0 0 -150px; /* CHANGE MARGINS TO ACCOMMODATE THE NEW WIDTH */
    }

<!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

Answer 5

#modalTest.modal-dialog{
    width: <insert size> !important;
}
the !important is important :v