web-dev-qa-db-fra.com

Comment puis-je changer la largeur d'un modal Bootstrap 3 dans IE8?

Je dois prendre en charge IE8. Le modal lui-même fonctionne bien, mais mes tentatives de le redimensionner (qui fonctionnent bien dans Firefox) ne fonctionnent pas dans IE8.

J'ajoute juste une classe (wide-modal dans cet exemple) à la div modal-dialog (la 2ème imbriquée dans la structure Bootstrap) et en appliquant une largeur via CSS, rien de 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 div au-dessus et en dessous pour aucun effet (positif). Cela fonctionne comme un charme où il se trouve dans Firefox, tout simplement sans effet du tout dans IE8. J'ai aussi essayé avec une largeur px, aucune différence. J'ai la bibliothèque respond.js en place, donc en général IE8 se comporte autrement.

internet-explorer-8modal-dialogtwitter-bootstrap-3
34
Chaz

Dans bootstrap 3 vous devez attribuer une largeur et non à .modal classe mais à .modal-dialog

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

J'ai utilisé une combinaison de CSS et de jQuery, ainsi que des conseils sur cette page, pour créer une largeur et une hauteur fluides en utilisant Bootstrap 3. J'ai également testé cela sur IE8 sur Win7, et cela fonctionne très bien.

Tout d'abord, du CSS pour gérer la largeur et la barre de défilement facultative pour la zone de contenu

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

Et puis quelques 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);
});

Rédaction complète et code sur http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

14
Scott Dawson

Je sais qu'il est tard mais vient d'être trouvé dans bs3 docs vous pouvez ajouter modal-lg classe à vos modaux

<!-- 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>
10
bto.rdz

Cela changera bien sûr la largeur de toutes vos fenêtres modales, mais cela pourrait vous donner une meilleure idée de la façon dont cela fonctionne. Je viens de changer 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 -->
3
Stirling
#modalTest.modal-dialog{
    width: <insert size> !important;
}
the !important is important :v
3
Damathryx

Je pense que vous devez définir la largeur en pixels et ajuster la marge gauche. Par exemple,

.modal-dialog {
    width:700px;
    margin-left:-320px;
}

La marge gauche doit être la moitié de la largeur du modal, moins 30 px pour la barre de défilement.

Voici un exemple sur Bootply: http://bootply.com/8521

2
Zim