Come posso modificare la larghezza di un modal Bootstrap 3 in IE8?

Question

Devo supportare IE8. La modale funziona perfettamente, ma i miei tentativi di ridimensionarlo (che funzionano bene in Firefox) non funzionano in IE8.

Sto solo aggiungendo una classe (wide-modal in questo esempio) alla finestra di dialogo mod div (il secondo nidificato nella struttura Bootstrap) e applicando una larghezza tramite CSS, niente di speciale.

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%; 
} 

Ho provato ad aggiungere la classe al div sopra e sotto a nessun effetto (positivo). Funziona come un fascino in Firefox, ma nessun effetto in IE8. Ho anche provato con una larghezza di px, nessuna differenza. Ho la libreria respond.js in posizione quindi in generale IE8 si comporta diversamente da questo.

Answer 1

Questo ovviamente cambierà la larghezza per tutte le finestre modali, ma potrebbe darti un'idea migliore di come funziona. Ho appena cambiato la mia finestra modale in questo modo.

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

Penso che sia necessario impostare la larghezza in pixel e regolare il margine sinistro. Ad esempio,

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

Il margine di sinistra deve essere la metà della larghezza del modal, meno 30px per la barra di scorrimento.

Ecco un esempio su Bootply: http://bootply.com/85213

Answer 3

In bootstrap 3 è necessario assegnare la larghezza di non .modal classe, ma per .modal-dialog

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

Answer 4

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

Answer 5

ho usato una combinazione di CSS e jQuery, insieme a suggerimenti su questa pagina, per creare una larghezza e altezza fluide usando Bootstrap 3. Ho anche provato questo su IE8 su Win7, e funziona benissimo.

In primo luogo, un po 'di CSS per gestire la larghezza e barra di scorrimento opzionale per l'area del contenuto

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

E poi un po' di jQuery per regolare l'altezza dell'area di contenuto, se necessario

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

svalutazione completa su e codice a http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

Answer 6

So che è tardi ma appena trovato in bs3 docs è possibile aggiungere modal-lg classe per i tuoi modals

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