Ho provato quanto segue:

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

E questo Javascript:

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

Il risultato non è quello che mi aspettavo. La modale in alto a sinistra è posizionata al centro dello schermo.

Qualcuno può aiutarmi. Qualcun altro ha provato questo. Presumo che non sia una cosa insolita voler fare.

AGGIORNARE:

In bootstrap 3è necessario modificare la finestra di dialogo modale. Quindi in questo caso puoi aggiungere la classe modal-adminnel luogo in cui si modal-dialogtrova.

Risposta originale (Bootstrap <3)

C'è un motivo per cui stai cercando di cambiarlo con JS / jQuery?

Puoi farlo facilmente con solo CSS, il che significa che non devi fare lo styling nel documento. Nel tuo file CSS personalizzato, aggiungi:

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

Nel tuo caso:

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

Il motivo per cui metto body davanti al selettore è che ha una priorità più alta rispetto al default. In questo modo è possibile aggiungerlo a un file CSS personalizzato e, senza preoccupazioni, aggiornare Bootstrap.

Se vuoi renderlo reattivo con solo CSS, usa questo:

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

Nota 1: ho usato una .largeclasse, potresti anche farlo normalmente.modal

Nota 2: In Bootstrap 3 il margine sinistro sinistro potrebbe non essere più necessario (non confermato personalmente)

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

Nota 3: In Bootstrap 3 e 4, esiste una modal-lgclasse. Quindi questo può essere sufficiente, ma se vuoi renderlo reattivo, hai ancora bisogno della correzione che ho fornito per Bootstrap 3.

In alcune applicazioni fixedvengono utilizzate le modali, in tal caso puoi provare width:80%; left:10%;(formula: sinistra = 100 - larghezza / 2)

Se stai usando Bootstrap 3, devi cambiare il div della finestra di dialogo modale e non il div modale come mostrato nella risposta accettata. Inoltre, per mantenere la natura reattiva di Bootstrap 3, è importante scrivere il CSS di sostituzione utilizzando una query multimediale in modo che il modale sia a larghezza piena su dispositivi più piccoli.

Vedi questo JSFiddle per sperimentare con larghezze diverse.

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) */
    }
}

Se vuoi qualcosa che non rompa il relativo disegno, prova questo:

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

Come afferma @Marco Johannesen, il "corpo" davanti al selettore è tale da avere una priorità più alta rispetto al valore predefinito.

In Bootstrap 3+ il modo più appropriato per modificare le dimensioni di una finestra di dialogo modale è utilizzare la proprietà size. Di seguito è riportato un esempio, notare il modal-smlungo della modal-dialogclasse, che indica un piccolo modale. Può contenere i valori smper small, mdper medium e lgper large.

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

Per Bootstrap 3 ecco come farlo.

Aggiungi uno modal-widestile al markup HTML (adattato dall'esempio nei documenti Bootstrap 3 )

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

e aggiungi il seguente CSS

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

Non v'è alcuna necessità di sovrascrivere margin-leftin Bootstrap 3per ottenere questo per essere centrato ora.

In Bootstrap 3 tutto ciò che serve è questo

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

La maggior parte delle risposte di cui sopra non ha funzionato per me !!!

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

La soluzione è stata presa da questa pagina

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

Nella v3 di Bootstrap esiste un metodo semplice per ingrandire un modale. Basta aggiungere la classe modal-lg accanto alla finestra di dialogo modale.

<!-- 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: al fine di mantenere le funzioni di risposta per dispositivi piccoli ed extra piccoli ho fatto quanto segue:

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

Questo è quello che ho fatto, nel mio custom.css ho aggiunto queste righe e questo è tutto.

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

Ovviamente, puoi cambiare la dimensione della larghezza.

Se Bootstrap> 3, aggiungi solo stile al tuo modale.

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

Ho trovato questa soluzione che funziona meglio per me. Puoi usare questo:

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

o questo a seconda delle tue esigenze:

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

Vedi il post in cui ho scoperto che: https://github.com/twitter/bootstrap/issues/675

FYI Bootstrap 3 gestisce automaticamente la proprietà sinistra. Quindi semplicemente aggiungendo questo CSS cambierà la larghezza e la manterremo centrata:

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

Preserva il design reattivo, imposta la larghezza su ciò che desideri.

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

Mantienilo semplice.

Modificando la classe model-dialogpuoi ottenere il risultato atteso. Questi piccoli trucchi funzionano per me. Spero che ti possa aiutare a risolvere questo problema.

.modal-dialog {
    width: 70%;
}

Con Bootstrap 3, tutto ciò che serve è un valore percentuale dato alla finestra di dialogo modale tramite CSS

CSS

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

Ho usato una combinazione di CSS e jQuery, insieme a suggerimenti in questa pagina, per creare una larghezza e un'altezza fluide usando Bootstrap 3.

Innanzitutto, alcuni CSS per gestire la larghezza e la barra di scorrimento opzionale per l'area del contenuto

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

E poi qualche jQuery per regolare l'altezza dell'area del contenuto, se necessario

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

Scrittura e codice completi su http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

In Bootstrap 3 con CSS puoi semplicemente usare:

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

Questo ti assicura di non interrompere il design della pagina, perché stiamo usando al .modal-dialogposto del .modalquale verrà applicato anche all'ombreggiatura.

Prova qualcosa di simile al seguente (vedi esempio jsfiddle live qui: 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>​

Invece di usare le percentuali per rendere il modale reattivo, trovo che ci possa essere un maggiore controllo dall'uso delle colonne e di altri elementi reattivi già integrati in bootstrap.

Per rendere la risposta modale / la dimensione di qualsiasi quantità di colonne:

1) Aggiungi un div extra attorno al div della finestra di dialogo modale con una classe di .container -

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

2) Aggiungi un po 'di CSS per rendere l'intera larghezza modale -

.modal-dialog {
    width: 100% }

3) In alternativa aggiungi una classe extra se hai altre modali -

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

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

4) Aggiungi una riga / colonne se vuoi modali di varie dimensioni -

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

Aggiungi quanto segue sul tuo file css

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

Usa sotto lo script:

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

  overflow-y: scroll;
}

Demo :

L'ho risolto per Bootstrap 4.1

Mix di soluzioni precedentemente pubblicate

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

Raggiunto risultato atteso utilizzando,

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

Notate che ho aggiunto la classe .employeeModal nella seconda div. Quindi dai uno stile a quella classe.

.employeeModal{
        width: 700px;
    }

L'ho usato in questo modo ed è un lavoro perfetto per me

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

Soluzione meno basata (no js) per 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; }
    }
}

Quindi, ovunque tu voglia specificare una larghezza modale:

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

Ho usato SCSS e il modale completamente reattivo:

.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;
    }

o

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