Intenté lo siguiente:

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

Y este Javascript:

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

El resultado no es lo que esperaba. El modal superior izquierdo se coloca en el centro de la pantalla.

Alguien puede ayudarme. Alguien más ha intentado esto. Supongo que no es algo inusual querer hacer.

ACTUALIZAR:

En bootstrap 3necesita cambiar el diálogo modal. Entonces, en este caso, puede agregar la clase modal-adminen el lugar donde se modal-dialogencuentra.

Respuesta original (Bootstrap <3)

¿Hay alguna razón por la que intentas cambiarlo con JS / jQuery?

Puede hacerlo fácilmente con solo CSS, lo que significa que no tiene que hacer su estilo en el documento. En su propio archivo CSS personalizado, agrega:

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

En tu caso:

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

La razón por la que pongo el cuerpo antes del selector es para que tenga una prioridad más alta que la predeterminada. De esta manera, puede agregarlo a un archivo CSS personalizado y, sin preocupaciones, actualice Bootstrap.

Si desea que responda solo con CSS, use esto:

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

Nota 1: utilicé una .largeclase, también puedes hacerlo normalmente.modal

Nota 2: en Bootstrap 3, el margen negativo izquierdo puede no ser necesario (no confirmado personalmente)

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

Nota 3: en Bootstrap 3 y 4, hay una modal-lgclase. Por lo tanto, esto puede ser suficiente, pero si desea que responda, aún necesita la solución que proporcioné para Bootstrap 3.

En algunas aplicaciones fixedse usan modales, en ese caso podría intentarlo width:80%; left:10%;(fórmula: izquierda = 100 - ancho / 2)

Si está utilizando Bootstrap 3, debe cambiar el div de diálogo modal y no el div modal como se muestra en la respuesta aceptada. Además, para mantener la naturaleza receptiva de Bootstrap 3, es importante escribir el CSS de anulación mediante una consulta de medios para que el modal sea de ancho completo en dispositivos más pequeños.

Vea este JSFiddle para experimentar con diferentes anchos.

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

Si desea algo que no rompa el diseño relativo, intente esto:

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

Como dice @Marco Johannesen, el "cuerpo" antes del selector es para que tenga una prioridad más alta que la predeterminada.

En Bootstrap 3+, la forma más adecuada de cambiar el tamaño de un cuadro de diálogo modal es usar la propiedad de tamaño. A continuación se muestra un ejemplo, observe a lo modal-smlargo de la modal-dialogclase, que indica un pequeño modal. Puede contener los valores smpara pequeño, mdmediano y lggrande.

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

Pues Bootstrap 3aquí está cómo hacerlo.

Agregue un modal-wideestilo a su marcado HTML (como se adaptó del ejemplo en los documentos de 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 -->

y agregue el siguiente CSS

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

No hay necesidad de anular margin-leften Bootstrap 3conseguir esto para estar centrado ahora.

En Bootstrap 3 todo lo que necesitas es esto

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

¡La mayoría de las respuestas anteriores no funcionaron para mí!

<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 solución fue tomada de esta página

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

En v3 de Bootstrap hay un método simple para hacer un modal más grande. Simplemente agregue la clase modal-lg junto a modal-dialog.

<!-- 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: para mantener las funciones de respuesta para dispositivos pequeños y extra pequeños, hice lo siguiente:

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

Esto es lo que hice, en mi custom.css agregué estas líneas y eso fue todo.

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

Obviamente, puede cambiar el tamaño del ancho.

Si Bootstrap> 3, solo agrega estilo a tu modal.

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

He encontrado esta solución que funciona mejor para mí. Puedes usar esto:

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

o esto dependiendo de sus requisitos:

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

Vea la publicación donde encontré eso: https://github.com/twitter/bootstrap/issues/675

FYI Bootstrap 3 maneja la propiedad izquierda automáticamente. Entonces, simplemente agregar este CSS cambiará el ancho y lo mantendrá centrado:

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

Preserve el diseño receptivo, ajuste el ancho a lo que desee.

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

Mantenlo simple.

Al alterar la clase model-dialog, puede lograr el resultado esperado. Estos pequeños trucos me funcionan. Espero que te ayude a resolver este problema.

.modal-dialog {
    width: 70%;
}

Con Bootstrap 3, todo lo que se requiere es un valor porcentual dado al diálogo modal a través de CSS

CSS

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

Utilicé una combinación de CSS y jQuery, junto con sugerencias en esta página, para crear un ancho y una altura fluidos usando Bootstrap 3.

Primero, algunos CSS para manejar el ancho y la barra de desplazamiento opcional para el área de contenido

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

Y luego un poco de jQuery para ajustar la altura del área de contenido si es necesario

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

Escritura completa y código en http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

En Bootstrap 3 con CSS, simplemente puede usar:

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

Esto asegura que no rompa el diseño de la página, porque estamos usando en .modal-dialoglugar de .modallo que se aplicará incluso al sombreado.

Pruebe algo como lo siguiente (vea el ejemplo de jsfiddle en vivo aquí: 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>​

En lugar de usar porcentajes para hacer que el modal responda, encuentro que se puede tomar más control al usar las columnas y otros elementos receptivos ya integrados en bootstrap.

Para que el modal responda / el tamaño de cualquier cantidad de columnas:

1) Agregue un div extra alrededor del div modal-dialog con una clase de .container -

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

2) Agregue un poco de CSS para hacer el ancho completo modal -

.modal-dialog {
    width: 100% }

3) Alternativamente, agregue una clase adicional si tiene otros modales:

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

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

4) Agregue una fila / columnas si desea modales de varios tamaños:

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

Agregue lo siguiente en su archivo CSS

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

Utilice la secuencia de comandos a continuación:

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

  overflow-y: scroll;
}

Demo :

Lo resolví para Bootstrap 4.1

Mezcla de soluciones publicadas anteriormente

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

Resultado esperado alcanzado usando,

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

Observe que agregué la clase .employeeModal en el segundo div. Entonces peina esa clase.

.employeeModal{
        width: 700px;
    }

Utilicé de esta manera, y es un trabajo perfecto para mí.

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

Solución menos basada (sin js) para 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; }
    }
}

Luego, donde quiera especificar un ancho modal:

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

Usé SCSS, y el modal totalmente receptivo:

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