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

UPDATE:

Unter bootstrap 3 müssen Sie den Modal-Dialog ändern. In diesem Fall können Sie also die Klasse modal-admin an dem Ort, an dem modal-dialog steht.

Ursprüngliche Antwort (Bootstrap < 3)

Gibt es einen bestimmten Grund, warum Sie versuchen, es mit JS/jQuery zu ändern?

Das geht ganz einfach mit CSS, d. h. Sie müssen das Styling nicht im Dokument selbst vornehmen. In Ihrer eigenen benutzerdefinierten CSS-Datei, fügen Sie:

body .modal {
    /* new custom width */
    width: 560px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -280px;
}

In Ihrem Fall:

body .modal-admin {
    /* new custom width */
    width: 750px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -375px;
}

Der Grund, warum ich body vor den Selektor gesetzt habe, ist, dass er eine höhere Priorität als der Standard hat. Auf diese Weise können Sie es zu einem benutzerdefinierten CSS-Datei hinzufügen, und ohne Sorgen aktualisieren Bootstrap.

Answer 2

Wenn Sie die Seite nur mit CSS responsiv machen wollen, verwenden Sie dies:

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

Anmerkung 1: Ich habe eine .large Klasse können Sie dies auch mit der normalen .modal

Hinweis 2: In Bootstrap 3 wird der negative margin-left-Wert möglicherweise nicht mehr benötigt. (nicht persönlich bestätigt)

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

Anmerkung 3: In Bootstrap 3 und 4 gibt es eine modal-lg Klasse. Dies mag also ausreichend sein, aber wenn Sie es responsive machen wollen, brauchen Sie immer noch den Fix, den ich für Bootstrap 3 bereitgestellt habe.

In einigen Anwendungen fixed Modale verwendet werden, könnten Sie in diesem Fall versuchen width:80%; left:10%; (Formel: links = 100 - Breite / 2)

Answer 3

Wenn Sie Bootstrap 3 verwenden, müssen Sie das Modal-Dialog-Div ändern und nicht das Modal-Div, wie es in der akzeptierten Antwort gezeigt wird. Um den responsiven Charakter von Bootstrap 3 beizubehalten, ist es außerdem wichtig, das Override-CSS mit einer Media Query zu schreiben, damit das Modal auf kleineren Geräten in voller Breite angezeigt wird.

Véase dieses JSFiddle um mit verschiedenen Breiten zu experimentieren.

HTML

<div class="modal fade">
    <div class="modal-dialog custom-class">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-header-text">Text</h3>
            </div>
            <div class="modal-body">
                This is some text.
            </div>
            <div class="modal-footer">
                This is some text.
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS

@media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}

Answer 4

Wenn Sie etwas wollen, das dem relativen Design nicht schadet, versuchen Sie dies:

body .modal {
  width: 90%; /* desired relative width */
  left: 5%; /* (100%-width)/2 */
  /* place center */
  margin-left:auto;
  margin-right:auto; 
}

Wie @Marco Johannesen sagt, ist das "body" vor dem Selektor so, dass es eine höhere Priorität als der Standard hat.

Answer 5

In Bootstrap 3+ ist der beste Weg, um die Größe eines modalen Dialogs zu ändern, die Verwendung der Eigenschaft size. Unten ist ein Beispiel, beachten Sie die modal-sm entlang der modal-dialog Klasse, was auf ein kleines Modal hinweist. Sie kann folgende Werte enthalten sm für kleine, md für mittlere und lg für große.

<div class="modal fade" id="ww_vergeten" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
  <div class="modal-dialog modal-sm"> <!-- property to determine size -->
    <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" id="modal_title">Some modal</h4>
      </div>
      <div class="modal-body">

        <!-- modal content -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="some_button" data-loading-text="Loading...">Send</button>
      </div>
    </div>
  </div>
</div>