it-swarm.com.ru

Как динамически изменить модальный размер 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> 
89
Erdem Ece

Поскольку ваш контент должен быть динамическим, вы можете динамически устанавливать свойства css для модального события по событию show, которое изменит модальный размер, переопределяя его спецификации по умолчанию. Причина в том, что bootstrap применяет максимальную высоту к модальному телу с правилом 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 в ваши целевые модалы.

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

Более новую версию начальной загрузки смотрите в разделе event names .

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

Старая версия начальной загрузки modal events поддерживается.

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

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

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

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

20
Luminous

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

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

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

.modal-dialog{
  display: table
}

В случае, если вы хотите добавить встроенный 

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

Не добавляйте display:table; в класс модального контента. это сделало вашу работу, но расположите ваш модальный для большого размера, смотрите следующие скриншоты . первое изображение, если вы добавляете стиль в modal-dialog  In case if you add style to modal-dialog , если вы добавляете стиль к модальному контенту. это выглядит настроенным .  enter image description here

6
waqas ali

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

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

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

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

Вы можете сделать это, если вы используете плагин диалога jquery от 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>

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

1
Atanas Atanasov

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

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

.modal-dialog {
  align-self: center;
}
0
Kirk Ross

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

0
Furquan

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

0
Subhashis Pal

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

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

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

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

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

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

0
Zulkifil

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

.modal-body {
    overflow-y: auto;
}
0
Brett Drake