Wie kann ich die Breite eines Bootstrap 3 Modals in IE8 ändern?

Habe ich zur Unterstützung von IE8. Die modale selbst funktioniert gut, aber meine versuche, um die Größe zu verändern (die funktionieren in Firefox) funktioniert nicht in IE8.

Ich bin einfach eine Klasse hinzufügen (wide-modal in diesem Beispiel) auf den modal-dialog-div (2. nested one in der Bootstrap-Struktur) und die Anwendung einer Breite über CSS, nichts besonderes.

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

Habe ich versucht, indem Sie die Klasse der div oben und unten keinen (positiven) Effekt. Es funktioniert wie ein Charme, wo es im Firefox, nur überhaupt keine Wirkung im IE8. Ich habe auch versucht mit einem px Breite, kein Unterschied. Ich habe die respond.js Bibliothek statt, so dass im Allgemeinen IE8 verhält sich anders als dieser.

InformationsquelleAutor der Frage Chaz | 2013-08-20

80

In bootstrap 3, die Sie benötigen, weisen Sie Breite, nicht zu .modal Klasse, aber zu .modal-dialog
```
#modalTest .modal-dialog
{
    width: 500px; /* your width */
}
```
InformationsquelleAutor der Antwort dante
14

Ich verwendet eine Kombination von CSS und jQuery, zusammen mit Tipps auf dieser Seite, erstellen Sie eine Flüssigkeit, Breite und Höhe mit Bootstrap 3. Ich habe auch getestet auf IE8 auf Win7, und es funktioniert Super.

Ersten, etwas CSS zu behandeln, die Breite und die optionale Scrollbalken für den content-Bereich
```
.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}
```
Dann einige jQuery, um die Höhe einzustellen, der content-Bereich, wenn nötig
```
$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});
```
Full write-up und den code an
http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

InformationsquelleAutor der Antwort Scott Dawson

Ich weiß, es ist spät, aber nur in bs3 docs Sie können hinzufügen modal-lg Klasse zu Ihrem 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>

InformationsquelleAutor der Antwort bto.rdz

Wird sich das natürlich ändern Sie die Breite für alle Ihre modalen Fenster, aber es könnte Ihnen eine bessere Idee, wie das funktioniert. Ich habe gerade meine modal windows diese Weise.

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

InformationsquelleAutor der Antwort Stirling

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

InformationsquelleAutor der Antwort Damathryx

2

Ich glaube, Sie müssen legen Sie die Breite in Pixel und anpassen der margin-left. Zum Beispiel,
```
.modal-dialog {
    width:700px;
    margin-left:-320px;
}
```
Den Rand Links muss die Hälfte der Breite des modal, minus 30px für die scrollbar.

Hier ist ein Beispiel auf Bootply: http://bootply.com/85213

InformationsquelleAutor der Antwort ZimSystem

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.