Cómo cambiar el tamaño de Twitter Bootstrap modal dinámicamente en función del contenido

Tengo contenido de base de datos que tiene diferentes tipos de datos, como videos de Youtube, videos de Vimeo, texto, imágenes de Imgur, etc. Todos tienen diferentes alturas y anchos. Todo lo que he encontrado mientras buscaba en Internet es cambiar el tamaño a un solo parámetro. Tiene que ser el mismo que el contenido de la ventana emergente.

Este es mi código HTML. También uso Ajax para llamar al contenido.

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="ModalLabel"></h3>
    </div>
    <div class="modal-body">

    </div>
</div> 

Dado que su contenido debe ser dinámico, puede establecer las propiedades css del modal dinámicamente en showcaso de que el modal cambie el tamaño del modal anulando sus especificaciones predeterminadas. La razón por la que bootstrap aplica una altura máxima al cuerpo modal con la regla css como se muestra a continuación:

.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px;
}

Entonces puede agregar estilos en línea dinámicamente usando el cssmétodo jquery :

Para versiones más nuevas del uso de bootstrap show.bs.modal

$('#modal').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

Para versiones anteriores del uso de bootstrap show

$('#modal').on('show', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

o use una regla CSS para anular:

.autoModal.modal .modal-body{
    max-height: 100%;
}

y agregue esta clase autoModala sus modales de destino.

Cambie el contenido dinámicamente en el violín, verá que el modal cambia de tamaño en consecuencia. Demo

La versión más nueva de bootstrap consulte el archivo event names.

• show.bs.modal Este evento se inmediatamente cuando se llama al método de instancia show. Si es causado por un clic, el elemento en el que se hizo clic está disponible como la propiedad relatedTarget del evento.
• shown.bs.modal Este evento se activa cuando el modal se ha hecho visible para el usuario (esperará a que se completen las transiciones CSS). Si es causado por un clic, el elemento en el que se hizo clic está disponible como la propiedad relatedTarget del evento.
• hide.bs.modal Este evento se dispara inmediatamente cuando se llama al método de instancia hide.
• hidden.bs.modal Este evento se dispara cuando el modal ha terminado de ocultarse al usuario (esperará a que se completen las transiciones CSS).
• loaded.bs.modal Este evento se dispara cuando el modal ha cargado contenido usando la opción remota.

Se modal events admite la versión anterior de bootstrap .

• Show : este evento se activa inmediatamente cuando se llama al método de instancia de show.
• mostrado : este evento se activa cuando el modal se ha hecho visible para el usuario (esperará a que se completen las transiciones css).
• hide : este evento se activa inmediatamente cuando se llama al método de instancia de hide.
• hidden : este evento se activa cuando el modal ha terminado de ocultarse al usuario (esperará a que se completen las transiciones css).

Esto funcionó para mí, nada de lo anterior funcionó.

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

No pude hacer que la respuesta de PSL funcionara para mí, así que encontré que todo lo que tengo que hacer es configurar el div que contiene el contenido modal con style="display: table;". El contenido modal en sí mismo dice qué tan grande quiere ser y el modal lo acomoda.

Hay muchas formas de hacer esto si desea escribir CSS y luego agregue lo siguiente

.modal-dialog{
  display: table
}

En caso de que desee agregar en línea

<div class="modal-dialog" style="display:table;">
//enter code here
</div>

No agregue display:table;a la clase de contenido modal. Hizo su trabajo pero disponga su modal para tamaño grande vea las siguientes capturas de pantalla. La primera imagen es si agrega estilo a modal-dialog si agrega estilo a modal-content. parece dispuesto.

para bootstrap 3 use like

$('#myModal').on('hidden.bs.modal', function () {
// do something…
})

Simple CSS funciona para mí

.modal-dialog { 
max-width : 100% ;
}

Simplemente anulo el CSS:

.modal-dialog {
    max-width: 1000px;
}

establecido width:fit-contenten el div modal.

Puede hacerlo si usa el complemento de diálogo jquery de gijgo.com y establece el ancho en automático.

$("#dialog").dialog({
  uiLibrary: 'bootstrap',
  width: 'auto'
});

<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
  <script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="dialog" title="Wikipedia">
   <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>
 </div>
</body>
</html>

También puede permitir que los usuarios controlen el tamaño si establece el tamaño en verdadero. Puede ver una demostración sobre esto en http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

Una solución CSS simple que centrará vertical y horizontalmente el modal:

.modal.show {
  display: flex !important;
  justify-content: center;
}

.modal-dialog {
  align-self: center;
}

Para Bootstrap 2, ajuste automáticamente la altura del modelo de forma dinámica

  //Auto adjust modal height on open 
  $('#modal').on('shown',function(){
     var offset = 0;
     $(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
  });

Tuve el mismo problema con bootstrap 3 y la altura del div del cuerpo modal no quería ser mayor que 442px. Esto fue todo el css necesario para solucionarlo en mi caso:

.modal-body {
    overflow-y: auto;
}

Mine Solution fue solo para agregar el estilo a continuación. <div class="modal-body" style="clear: both;overflow: hidden;">

A partir de Bootstrap 4, tiene un estilo de:

@media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
}

entonces, si está buscando cambiar el tamaño del ancho modal a un ancho mayor, sugeriría usar esto en su css, por ejemplo:

.modal-dialog { max-width: 87vw; }

Tenga en cuenta que la configuración width: 87vw;no anulará la de bootstrap max-width: 500px;.

Mi búsqueda me llevó aquí, así que también podría agregar mi idea de dos centavos. Si está utilizando el modo de Bootstrap de Twitter compatible con Monkey , puede hacer algo como esto:

    var dialog = new BootstrapDialog({
        id: 'myDialog',
        title: 'Title',
        closable: false,
        // whatever you like configuration here...
    });

    dialog.realize();
    if (isContentAYoutubeVideo()) {
        dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
    }
    dialog.open();

Espero que esto ayude.