Wie kann ich die Standardbreite einer Twitter Bootstrap Modalbox ändern?

Question

Ich habe Folgendes versucht:

   <div class="modal hide fade modal-admin" id="testModal" style="display: none;">
        <div class="modal-header">
          <a data-dismiss="modal" class="close">×</a>
          <h3 id='dialog-heading'></h3>
        </div>
        <div class="modal-body">
            <div id="dialog-data"></div>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="btn" >Close</a>
          <a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
        </div>
    </div>

Und dieses Javascript:

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

Das Ergebnis ist nicht das, was ich erwartet hatte. Das Modal oben links ist in der Mitte des Bildschirms positioniert.

Kann mir jemand helfen? Hat jemand anderes dies versucht. Ich nehme an, dass es nicht ungewöhnlich ist, so etwas zu tun.

Answer 1

Untenstehendes Skript verwenden:

.modal {
  --widthOfModal: 98%;
  width: var(--widthOfModal) !important;
  margin-left: calc(calc(var(--widthOfModal) / 2) * (-1)) !important;
  height: 92%;

  overflow-y: scroll;
}

Demo :

Answer 2

Fügen Sie in Ihrer css-Datei Folgendes hinzu

.popover{
         width:auto !important; 
         max-width:445px !important; 
         min-width:200px !important;
       }

Answer 3

Versuchen Sie etwas wie das Folgende (siehe Live-Jsfiddle-Beispiel hier: http://jsfiddle.net/periklis/hEThw/1/ )

<a class="btn" onclick = "$('#myModal').modal('show');$('#myModal').css('width', '100px').css('margin-left','auto').css('margin-right','auto');" ref="#myModal" >Launch Modal</a>
<div class="modal" id="myModal" style = "display:none">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Answer 4

Anstatt Prozentwerte zu verwenden, um das Modal reaktionsfähig zu machen, finde ich, dass man mit den Spalten und anderen reaktionsfähigen Elementen, die bereits in Bootstrap eingebaut sind, mehr Kontrolle ausüben kann.

---

So machen Sie das Modal responsive / die Größe der eine beliebige Anzahl von Spalten:

1) Fügen Sie ein zusätzliches div um das modal-dialog div mit der Klasse .container -

<div class="container">
    <div class="modal-dialog">
    </div>
</div>

2) Fügen Sie ein wenig CSS hinzu, um das Modal in voller Breite darzustellen -

.modal-dialog {
    width: 100% }

3) Fügen Sie alternativ eine zusätzliche Klasse hinzu, wenn Sie andere Modale haben -

<div class="container">
    <div class="modal-dialog modal-responsive">
    </div>
</div>

.modal-responsive.modal-dialog {
    width: 100% }

4) Fügen Sie eine Reihe/Spalten hinzu, wenn Sie Modals in verschiedenen Größen haben möchten -

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="modal-dialog modal-responsive">
       ...
      </div>
    </div>
  </div>
</div>

Answer 5

Erreicht das erwartete Ergebnis mit,

.modal-dialog {
    width: 41% !important;
}