Cómo cambiar el tamaño de Twitter Bootstrap modal dinámicamente según el contenido

5 minutos de lectura

Como cambiar el tamano de Twitter Bootstrap modal dinamicamente segun
Erdem Ece

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 ellos tienen diferentes alturas y anchuras. 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> 

Como cambiar el tamano de Twitter Bootstrap modal dinamicamente segun
Amit Shah

Esto funcionó para mí, ninguno de los anteriores funcionó.

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

  • @GreenAsJade puede que estos enlaces te ayuden a entender: colintoh.com/blog/display-table-anti-héroe iandevlin.com/blog/2013/06/css/css-stacking-with-display-table

    – Amit Shah

    03 mayo 2016 en 01:29

  • @maheshreddy Bienvenido, no olvides votar +1 si te ayuda. para que otros puedan confiar más en esta respuesta y probar.

    – Amit Shah

    8 de junio de 2016 a las 1:24

  • Establece dinámicamente la altura, pero esta vez el diálogo modal se abre en el lado izquierdo de la pantalla. ¿Como arreglarlo?

    – Jack

    08 sep.

  • pero esto no funciona en la vista móvil receptiva. Es bastante trabajar en pantallas de portátiles.

    – chetano

    9 de septiembre de 2016 a las 9:35

  • Esto funcionó, pero tuvo el impacto no deseado de que el modal ya no estuviera centrado verticalmente en la página. No es gran cosa en absoluto, pero pensé en mencionar algo.

    – John Allard

    12 oct.

Como cambiar el tamano de Twitter Bootstrap modal dinamicamente segun
PSL

Dado que su contenido debe ser dinámico, puede establecer las propiedades css del modal dinámicamente en show evento del modal que cambiará el tamaño del modal anulando sus especificaciones predeterminadas. El motivo por el que se ejecuta bootstrap aplica una altura máxima al cuerpo modal con la regla css de la siguiente manera:

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

Para que pueda agregar estilos en línea dinámicamente usando jquery css método:

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 agrega esta clase autoModal a sus modales de destino.

Cambie el contenido dinámicamente en el violín, verá que el modal se redimensiona en consecuencia. Manifestación

Versión más reciente de bootstrap ver la disponible event names.

  • mostrar.bs.modal Este evento se activa 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 de destino relacionada del evento.
  • mostrado.bs.modal Este evento se activa cuando el modal se ha hecho visible para el usuario (esperará a que se completen las transiciones de CSS). Si es causado por un clic, el elemento en el que se hizo clic está disponible como la propiedad de destino relacionada del evento.
  • ocultar.bs.modal Este evento se activa inmediatamente cuando se llama al método de instancia oculta.
  • oculto.bs.modal Este evento se activa cuando el modal ha terminado de ocultarse para el usuario (esperará a que se completen las transiciones de CSS).
  • cargado.bs.modal Este evento se activa cuando el modal ha cargado contenido usando la opción remota.

Versión anterior de bootstrap eventos modales soportado.

  • Show – Este evento se activa inmediatamente cuando se llama al método de instancia de demostración.
  • mostrado – Este evento se activa cuando el modal se ha hecho visible para el usuario (esperará a que se completen las transiciones css).
  • esconder – Este evento se dispara inmediatamente cuando se llama al método de instancia oculta.
  • oculto – Este evento se dispara cuando el modal ha terminado de ocultarse al usuario (esperará a que se completen las transiciones css).

  • tuve que cambiar #modal a lo mismo que .moda-body ahora funciona perfectamente. ¡Muchas gracias!

    -Erdem Ece

    22 abr. 13 en 18:23

  • @PSL, +1 por la respuesta y por presentarme kbd en SO.

    – Rolando Isidoro

    27 jun.


  • parece que el evento show no funciona. esto funcionó: $('#modal').on('show.bs.modal', function () { getbootstrap.com/javascript/#modals-events

    – joym8

    06 mar. 15 a las 22:32

  • +1 por detalles y acomodar lo viejo y lo nuevo. Ahora, si tan solo no llenara todo el ancho de la pantalla y en realidad tuviera un tamaño dinámico.

    – Luminoso

    17 jun.

  • @PSL en tiempo de ejecución, ¿cómo puede manipular el ancho del modal? Quiero decir, ¿hacerlo más pequeño o más grande con JavaScript?

    – Sredny M Casanova

    08 ene.

No pude hacer que la respuesta de PSL me funcionara, así que descubrí 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.

  • Tampoco pude hacer que la respuesta de PSL funcionara. (Tal vez porque estaba usando la versión Angular de bootstrap) Esto funcionó para mí. Solo para tener en cuenta que este estilo se agrega en la clase .modal-dialog +1

    – usuario227353

    21 jul.


  • Apliqué su solución al div que tiene como clase “modal-content”, Funcionó para mí.

    – Mehdi

    18 de noviembre de 18 a las 3:13

para bootstrap 3 uso como

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

Css simple funciona para mí

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

1641826623 563 Como cambiar el tamano de Twitter Bootstrap modal dinamicamente segun
Robar

Simplemente anulo el css:

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

1641826623 122 Como cambiar el tamano de Twitter Bootstrap modal dinamicamente segun
amigo subhashis

colocar width:fit-content en la división modal.

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad