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 habe. Das Modal oben links befindet sich in der Mitte des Bildschirms.

Kann mir jemand helfen. Hat das noch jemand versucht? Ich nehme an, es ist keine ungewöhnliche Sache, das tun zu wollen.

AKTUALISIEREN:

In müssen bootstrap 3Sie den Modaldialog ändern. In diesem Fall können Sie die Klasse modal-adminan der Stelle hinzufügen, an der sie modal-dialogsteht.

Ursprüngliche Antwort (Bootstrap <3)

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

Sie können dies problemlos mit nur CSS tun, sodass Sie das Styling nicht im Dokument vornehmen müssen. In Ihrer eigenen benutzerdefinierten CSS-Datei fügen Sie Folgendes hinzu:

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 stelle, ist, dass er eine höhere Priorität als der Standard hat. Auf diese Weise können Sie es einer benutzerdefinierten CSS-Datei hinzufügen und Bootstrap problemlos aktualisieren.

Wenn Sie es nur mit CSS ansprechen möchten, verwenden Sie Folgendes:

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

Anmerkung 1: Ich habe eine .largeKlasse verwendet. Sie können dies auch normal tun.modal

Hinweis 2: In Bootstrap 3 wird der negative linke Rand möglicherweise nicht mehr benötigt (nicht persönlich bestätigt).

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

Hinweis 3: In Bootstrap 3 und 4 gibt es eine modal-lgKlasse. Dies mag also ausreichend sein, aber wenn Sie darauf reagieren möchten, benötigen Sie immer noch das Update, das ich für Bootstrap 3 bereitgestellt habe.

In einigen Anwendungen werden fixedModalitäten verwendet. In diesem Fall können Sie es versuchen width:80%; left:10%;(Formel: left = 100 - width / 2).

Wenn Sie Bootstrap 3 verwenden, müssen Sie das Modal-Dialog-Div und nicht das Modal-Div ändern, wie es in der akzeptierten Antwort angezeigt wird. Um die Reaktionsfähigkeit von Bootstrap 3 zu erhalten, ist es wichtig, das Override-CSS mithilfe einer Medienabfrage zu schreiben, damit das Modal auf kleineren Geräten die volle Breite hat.

In dieser JSFiddle können Sie mit verschiedenen Breiten 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) */
    }
}

Wenn Sie etwas möchten, das das relative Design nicht beeinträchtigt, versuchen Sie Folgendes:

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 der "Körper" vor dem Selektor so, dass er eine höhere Priorität als die Standardeinstellung hat.

In Bootstrap 3+ ist die Verwendung der size-Eigenschaft die am besten geeignete Methode zum Ändern der Größe eines modalen Dialogfelds. Unten sehen Sie ein Beispiel, das modal-smentlang der modal-dialogKlasse angezeigt wird und ein kleines Modal angibt. Es kann die Werte smfür klein, mdmittel und lggroß enthalten.

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

Denn so Bootstrap 3geht's.

Fügen Sie modal-wideIhrem HTML-Markup einen Stil hinzu (wie aus dem Beispiel in den Bootstrap 3-Dokumenten angepasst ).

<div class="modal fade modal-wide" 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 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </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 -->

und fügen Sie das folgende CSS hinzu

.modal-wide .modal-dialog {
  width: 80%; /* or whatever you wish */
}

Es besteht keine Notwendigkeit außer Kraft zu setzen margin-leftin Bootstrap 3auf diese nun zentriert erhalten werden.

In Bootstrap 3 benötigen Sie lediglich Folgendes

<style>
    .modal .modal-dialog { width: 80%; }
</style>

Die meisten der oben genannten Antworten haben bei mir nicht funktioniert !!!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<style>
  #myModal1 .modal-dialog {
    width: 80%;
  }
  #myModal2 .modal-dialog {
    width: 50%;
  }
</style>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
  80%
</button>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  50%
</button>
<center>
  <!-- Modal -->
  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 80%
        </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>
    </div>
  </div>


  <!-- Modal -->
  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 50%
        </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>
    </div>
  </div>

</center>

Die Lösung wurde von dieser Seite übernommen

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

In Version 3 von Bootstrap gibt es eine einfache Methode, um ein Modal größer zu machen. Fügen Sie einfach die Klasse modal-lg neben modal-dialog hinzu.

<!-- My Modal Popup -->
<div id="MyWidePopup" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg"> <---------------------RIGHT HERE!!
        <!-- Modal content-->
        <div class="modal-content">

Bootstrap 3: Um die Reaktionsfunktionen für kleine und extra kleine Geräte beizubehalten, habe ich Folgendes getan:

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}

Dies ist, was ich getan habe, in meiner custom.css habe 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.

Wenn Bootstrap> 3 ist, fügen Sie Ihrem Modal einfach Stil hinzu.

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

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

FYI Bootstrap 3 behandelt die linke Eigenschaft automatisch. Durch einfaches Hinzufügen dieses CSS wird die Breite geändert und zentriert:

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

Behalten Sie das reaktionsschnelle Design bei und stellen Sie die Breite nach Ihren Wünschen ein.

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

Halte es einfach.

Wenn Sie die Klasse model-dialogändern, können Sie das erwartete Ergebnis erzielen. Diese kleinen Tricks funktionieren bei mir. Ich hoffe, es wird Ihnen helfen, dieses Problem zu lösen.

.modal-dialog {
    width: 70%;
}

Bei Bootstrap 3 ist lediglich ein Prozentwert erforderlich, der dem Modaldialog über CSS zugewiesen wird

CSS

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

Ich habe eine Kombination aus CSS und jQuery zusammen mit Hinweisen auf dieser Seite verwendet, um mit Bootstrap 3 eine flüssige Breite und Höhe zu erstellen.

Zunächst einige CSS zur Behandlung der Breite und der optionalen Bildlaufleiste für den Inhaltsbereich

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

Und dann etwas jQuery, um bei Bedarf die Höhe des Inhaltsbereichs 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/

In Bootstrap 3 mit CSS können Sie einfach Folgendes verwenden:

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

Dies stellt sicher, dass Sie das Design der Seite nicht beschädigen, da wir .modal-dialogstattdessen .modaldas verwenden, das sogar auf die Schattierung angewendet wird.

Versuchen Sie Folgendes: (siehe Live-Beispiel für jsfiddle 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>​

Anstatt Prozentsätze zu verwenden, um das Modal reaktionsfähig zu machen, kann die Verwendung der Spalten und anderer reaktionsfähiger Elemente, die bereits in Bootstrap integriert sind, stärker kontrolliert werden.

So reagieren Sie auf das Modal / die Größe einer beliebigen Anzahl von Spalten:

1) Fügen Sie ein zusätzliches Div um das Modal-Dialog-Div mit einer Klasse von .container hinzu -

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

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

.modal-dialog {
    width: 100% }

3) Alternativ können Sie eine zusätzliche Klasse hinzufügen, wenn Sie andere Modalitäten haben -

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

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

4) Fügen Sie eine Zeile / Spalten hinzu, wenn Sie Modalitäten unterschiedlicher Größe wünschen -

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

Fügen Sie Ihrer CSS-Datei Folgendes hinzu

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

Verwenden Sie das folgende Skript:

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

  overflow-y: scroll;
}

Demo :

Ich habe es für Bootstrap 4.1 gelöst

Mix aus zuvor veröffentlichten Lösungen

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

Erreichtes erwartetes Ergebnis mit,

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

Bootstrap 3.xx.

   <!-- Modal -->
<div class="modal fade" id="employeeBasicDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm employeeModal" role="document">

        <form>

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
            </div>

            <div class="modal-body row">
                Modal Body...
            </div>

            <div class="modal-footer"> 
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

        </form>

    </div>
</div>

Beachten Sie, dass ich die Klasse .employeeModal in der zweiten Division hinzugefügt habe. Dann stylen Sie diese Klasse.

.employeeModal{
        width: 700px;
    }

Ich habe es so benutzt und es funktioniert perfekt für mich

$("#my-modal")
.modal("toggle")
.css({'width': '80%', 'margin-left':'auto', 'margin-right':'auto', 'left':'10%'});

Weniger basierte Lösung (kein js) für Bootstrap 2:

.modal-width(@modalWidth) {
    width: @modalWidth;
    margin-left: -@modalWidth/2;

    @media (max-width: @modalWidth) {
        position: fixed;
        top:   20px;
        left:  20px;
        right: 20px;
        width: auto;
        margin: 0;
        &.fade  { top: -100px; }
        &.fade.in { top: 20px; }
    }
}

Dann, wo immer Sie eine modale Breite angeben möchten:

#myModal {
    .modal-width(700px);
}

Ich habe SCSS und das voll ansprechende Modal verwendet:

.modal-dialog.large {
    @media (min-width: $screen-sm-min) { width:500px; }
    @media (min-width: $screen-md-min) { width:700px; }
    @media (min-width: $screen-lg-min) { width:850px; }
} 

you can use any prefix or postfix name for modal. but you need to make sure that's should use everywhere with same prefix/postfix name.    

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

oder

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