Как изменить размер Twitter-бутстрапа в динамическом режиме на основе контента

Ответ 1

Поскольку ваш контент должен быть динамическим, вы можете быстро установить свойства 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-переходов).

Ответ 2

Это сработало для меня, ничего из этого не было.

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

Ответ 3

Я не мог получить ответ PSL для меня, поэтому я нашел все, что мне нужно сделать, это установить div, содержащий модальный контент с помощью style="display: table;". Сам модальный контент говорит, насколько он хочет быть, и модальный вмещает его.

Ответ 4

для бутстрапа 3 используйте как

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

Ответ 5

Существует много способов сделать это, если вы хотите написать css и добавить следующий

.modal-dialog{
  display: table
}

Если вы хотите добавить встроенный

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

Не добавляйте display:table; в класс модального контента. это сделало вашу работу, но выложите свой модальный размер для большого размера, следуя скриншотам. Первое изображение - если вы добавляете стиль в модальный диалог если вы добавите стиль в модальный контент. он выглядит условно.

Ответ 6

Простые Css работают для меня

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

Ответ 7

Это можно сделать, если вы используете плагин jquery dialog из gijgo.com и задаете ширину для автоматического.

$("#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>

Ответ 8

Я просто переопределить CSS:

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

Ответ 9

Для Bootstrap 2 Автоматическая настройка высоты модели динамически

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

Ответ 10

У меня была та же проблема с bootstrap 3 и высотой div div модального тела, которая не была бы больше, чем 442px. Это все, что нужно css, чтобы исправить это в моем случае:

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

Ответ 11

Мое решение было просто добавить ниже стиль. <div class="modal-body" style="clear: both;overflow: hidden;">

Ответ 12

Простое решение CSS, которое будет вертикально и горизонтально центрировать мод:

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

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

Ответ 13

set width:fit-content для модального div.

Ответ 14

Начиная с Bootstrap 4 - он имеет стиль:

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

так что если вы хотите изменить модальную ширину до некоторой ширины, я бы предложил использовать это в вашей CSS, например:

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

Обратите внимание, что width: 87vw; установки width: 87vw; не будет переопределять начальную загрузку max-width: 500px; ,