¿Cómo puedo cambiar el ancho predeterminado de un cuadro modal de Bootstrap de Twitter?


373

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.


El complemento Bootstrap no parece tener tantas opciones. intente ubicar la clase en el archivo CSS de bootstrap y ver si se establece a través de CSS, entonces debería poder sobrescribir o al menos tener una mejor pista sobre qué elemento es.
GillesC

3
¡Mire la respuesta de Nick N para obtener una respuesta receptiva muy agradable! stackoverflow.com/a/16090509/539484
OnTheFly

Respuestas:


373

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.


2
¡Desplácese a continuación para obtener una mejor respuesta (receptiva) gracias a @NickN!
OnTheFly

1
@FloatingRock puedes hacer que responda, mira mi respuesta
Nick N.

1
@NickN. ¡Asesino! Gracias Nick
FloatingRock

47
Bootstrap 3 hace esto más fácil. .modal .modal-dialog { width: 800px; }La posición izquierda se calcula automáticamente.
Gavin

1
En realidad, esto no funciona para mí. La solución dada en comentario por @ZimSystem hizo el truco.
tonjo

270

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)


Esto parece causar que el modal esté medio fuera de la pantalla en pantallas muy estrechas.
cofiem

55
Cofiem, use una consulta de medios para arreglar esto
Nick N.

1
@NickN. mi consulta de medios no lo solucionó. ¿Puedes agregar un ejemplo? Desprecio, lo tengo. Tenía max-width en lugar de min-width. @media (min-width: 400px) { body .modal-lrg{ width: 80%; /* respsonsive width */ margin-left:-40%; /* width/2) */ } }
HPWD

Creo que solo usar un% no da suficiente control como lo haría con las columnas ya integradas en bootstrap.
Alex

@ Alex Creo que te da más control, ¿cómo lo harías con las columnas existentes?
Nick N.

107

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

3
uno correcto para bootstrap3. funciona sin margen de adaptación! thx
SQueek

1
Eliminé el atributo id en la respuesta porque no es necesario.
Arcdegree

funciona, pero no responde como mlunoe o Dave responde.
ksiomelo

80

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.


44
Recomiendo simplemente usar en margin-left:auto; margin-right:auto;lugar de autotodo el camino
cwd

en algunos casos uno podría necesitar top: 30%, el porcentaje depende del contenido que contenga.
bool.dev

66
Esto funciona bien para mí cuando omito la regla .modal.fade.in, que mueve el modal hasta el final en Bootstrap V2.2.2.
ramiro

1
Esto funcionó con el ejemplo modal ANGULAR-UI ... Simplemente suelte el código en un archivo CSS y cárguelo en la página ... angular-ui.github.io/bootstrap/#/modal ... Ejecutando ejemplo en plnkr.co / edit / GYmc9s? p = preview
Marcello de Sales

1
genial esta solución funciona bien en 2.3.2 bootstrap y MAIN en internet explorer 8,9,10 !!!! solución con margen izquierdo: -40% es incorrecto en Internet Explorer !!!
Cioxideru

41

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>

Lo agregué a mi respuesta :)
Tum

3
¿No debería ser esta la mejor respuesta? Supongo que la respuesta principal podría ayudarlo a personalizarlo, pero la mayoría de los casos de uso deberían satisfacerse con las clases incorporadas de Bootstrap.
WebSpanner

Estoy usando Bootstrap 3.xy parece que no tengo modal-mdclase.
James Poulose

34

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.


3
Solo para evitar confusiones, no hay ninguna razón técnica para agregar la modal-wideclase, lo que significa que no es una clase "interna" de Bootstrap. Simplemente puedes hacerlo#myModal .modal-dialog { width: 80%; }
Gavin

1
Sí. Pero hacerlo como un estilo lo hace más reutilizable.
Dave Sag

2
Sí, lo entiendo. Solo que muchas veces es difícil diferenciar entre una clase bootstrap y una clase personalizada, así que quería anotarlo.
Gavin

20

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


¿Sabes cómo cambiar la altura modal? Gracias por su respuesta, funciona de maravilla :)
FrenkyB

17

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

15

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

¿Por qué el voto negativo? ¡Absolutamente, y limpiamente, me dio un bonito cuadro de diálogo amplio! ¡Y solo usa clases de arranque "adecuadas"!
Dave

Intente recuperar algunos de sus elementos HTML: use la estructura más simple que pueda para probarlo.
Dave

13

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

es lo correcto. esto funciona para mi no olvide cambiar la propiedad de ancho a XX% para un diseño receptivo. Por cierto, la versión en mi caso es 3.0.3
Jerry Chen

7

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.


7

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

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

6

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


5

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

Trabajado para B3! ¡Muchas gracias!
Bagata

4

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.


4

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

3

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

1
sí, la navaja de occam va a este. probado en 3.0 funciona muy bien
Gui de Guinetik

3

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/


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.


2

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

2

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>

2

Agregue lo siguiente en su archivo CSS

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

2

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 :

Demo en gif


2

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


1

Resultado esperado alcanzado usando,

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

1

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

captura de pantalla del fragmento de código


0

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%'});

0

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

0

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

0
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;
        }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.