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

Ändern der Klasse model-dialog können Sie das erwartete Ergebnis erzielen. Diese kleinen Tricks funktionieren bei mir. Ich hoffe, sie helfen Ihnen, dieses Problem zu lösen.

.modal-dialog {
    width: 70%;
}

Answer 2

Ich habe eine Kombination aus CSS und jQuery verwendet, zusammen mit den Hinweisen auf dieser Seite, um eine fließende Breite und Höhe mit Bootstrap 3 zu erstellen.

Zunächst etwas CSS für die Breite und die optionale Bildlaufleiste für den Inhaltsbereich

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

Und dann etwas jQuery, um die Höhe des Inhaltsbereichs bei Bedarf anzupassen

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

Vollständige Beschreibung und Code unter http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

Answer 3

Mit Bootstrap 3 können alle t

CSS

#alertModal .modal-dialog{
     width: 20%;
}

Answer 4

Unter Bootstrap 3 mit CSS können Sie einfach verwenden:

body .modal-dialog {
    /* percentage of page width */
    width: 40%;
}

Dadurch wird sichergestellt, dass das Design der Seite nicht unterbrochen wird, denn wir verwenden .modal-dialog 代わりに .modal die auch auf die Schattierung angewendet wird.

Answer 5

Ich habe es für Bootstrap 4.1 gelöst

Mischung aus bereits veröffentlichten Lösungen

.modal-lg {
  max-width: 90% !important; /* desired relative width */
  margin-left:auto !important;
  margin-right:auto !important;
}