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

Dies ist, was ich tat, in meinem custom.css ich diese Zeilen hinzugefügt und das war alles.

.modal-lg {
    width: 600px!important;
    margin: 0 auto;
}

Natürlich können Sie die Größe der Breite ändern.

Answer 2

Wenn Bootstrap>3, fügen Sie einfach Stil zu Ihrem modal.

<div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>

Answer 3

Ich habe diese Lösung gefunden, die für mich besser funktioniert. Sie können dies verwenden:

$('.modal').css({
  'width': function () { 
    return ($(document).width() * .9) + 'px';  
  },
  'margin-left': function () { 
    return -($(this).width() / 2); 
  }
});

oder dies, je nach Ihren Anforderungen:

$('.modal').css({
  width: 'auto',
  'margin-left': function () {
     return -($(this).width() / 2);
  }
});

Siehe den Beitrag, in dem ich das gefunden habe: https://github.com/twitter/bootstrap/issues/675

Answer 4

Zu Ihrer Information: Bootstrap 3 behandelt die linke Eigenschaft automatisch. So fügen Sie einfach diese CSS wird die Breite ändern und halten Sie es zentriert:

.modal .modal-dialog { width: 800px; }

Answer 5

Behalten Sie das responsive Design bei, stellen Sie die Breite so ein, wie Sie es wünschen.

.modal-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
}

Halten Sie es einfach.