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

У меня есть содержимое базы данных, которое содержит разные типы данных, такие как видео Youtube, видео Vimeo, текст, изображения Imgur и т. Д. Все они имеют разную высоту и ширину. Все, что я нашел при поиске в Интернете, это изменение размера только одного параметра. Он должен совпадать с содержимым всплывающего окна.

Это мой HTML-код. Я также использую Ajax для вызова контента.

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

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

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

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

Для более новых версий бутстрапа используйте 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в целевые модальные окна.

Измените содержимое динамически в скрипке, вы увидите, что размер модального окна соответственно изменится. Demo

Более новая версия bootstrap см. Доступную event names.

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

modal events Поддерживается более старая версия бутстрапа .

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

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

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

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

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

.modal-dialog{
  display: table
}

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

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

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

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

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

Простая работа css для меня

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

Я просто отменяю css:

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

установлен width:fit-contentна модальном div.

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

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

Вы также можете разрешить пользователям управлять размером, если для параметра resizable установлено значение true. Вы можете увидеть демонстрацию этого на http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

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

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

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

Для 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;');
  });

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

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

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

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

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

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

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

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

Мой поиск привел меня сюда, так что с таким же успехом можно добавить идею на два цента. Если вы используете модальный Twitter Bootstrap, дружественный к обезьянам, вы можете сделать что-то вроде этого:

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

Надеюсь это поможет.