Как динамически изменить модальный размер Twitter Bootstrap в зависимости от содержимого

Поскольку ваш контент должен быть динамическим, вы можете быстро установить свойства css модальности в событии show модальности, которое изменит размер модальности, переопределяя его спецификации по умолчанию. Причина бутстрапа применяет максимальную высоту к модальному телу с помощью правила css, как показано ниже:

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

Таким образом, вы можете добавлять встроенные стили динамически с помощью метода jquery css:

Для более новых версий загрузки используйте 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%'
       });
});

Для более старых версий загрузки используйте show

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

или используйте правило css для переопределения:

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

и добавьте этот класс autoModal к вашим целевым модалам.

Измените содержимое динамически в скрипте, вы увидите, что модальное изменение размера будет соответствующим образом изменено. Демо

Более новая версия бутстрапа увидит доступную event names.

• show.bs.modal Это событие срабатывает сразу же после вызова метода show instance. Если вызвано щелчком, элемент clicked доступен как свойство relatedTarget события.
• показано .bs.modal Это событие запускается, когда модальное изображение становится видимым для пользователя (будет ждать завершения CSS-переходов). Если вызвано щелчком, элемент clicked доступен как свойство relatedTarget события.
• hide.bs.modal Это событие запускается сразу же после вызова метода экземпляра hide.
• hidden.bs.modal. Это событие запускается, когда модальное завершение скрывается от пользователя (будет ждать завершения CSS-переходов).
• loaded.bs.modal Это событие запускается, когда модаль загружает контент с помощью удаленного параметра.

Поддерживается старая версия загрузочного модальных событий.

• Показать. Это событие срабатывает сразу же после вызова метода show instance.
• показано. Это событие запускается, когда модальное изображение становится видимым для пользователя (будет ждать завершения css-переходов).
• скрыть. Это событие запускается сразу же после вызова метода экземпляра hide.
• скрытый. Это событие запускается, когда модальное завершение скрывается от пользователя (будет ждать завершения css-переходов).