Увеличить модальный размер для Twitter Bootstrap

в Bootstrap 3:

.modal-dialog{
  width:whatever
}

Вам нужно убедиться, что он находится в элементе #myModal.modal-body не просто #myModal (Видно, что несколько человек совершают эту ошибку), и вы также можете захотеть разместить изменения высоты, изменив поля модалов.

Используя новое измерение CSS3 'vh' (или 'vw' для ширины), которое устанавливает высоту как часть порта представления, используйте:

.modal-body {
    max-height: 80vh; //Sets the height to 80/100ths of the viewport.
}

Таким образом, если вы используете адаптивную инфраструктуру, такую ​​как Bootstrap, то вы также можете сохранить этот дизайн в своих модалях.

Смешивание двух методов для ширины и высоты, и у вас есть хороший хак:

CSS

#myModal .modal-body {max-height: 800px;}

JQuery

$('myModal').modal('toggle').css({'width': '800px','margin-left': function () {return -($(this).width() / 2);}})

Это тот, который я использую. Он исправляет поля и полосы прокрутки как по ширине, так и по высоте, но не изменяет размер модальности, чтобы соответствовать его контенту.

Надеюсь, что я помог!

Использование класса CSS (вы также можете переопределить стиль - не рекомендуется):

(HTML)

<div class="modal-body custom-height-modal" >

(CSS)

.custom-height-modal {
  height: 400px;
}

Я получил ответ... дело в том, что вы переписываете атрибут max-height, а также bootstrap modal может быть изменен за пределы высоты 500px

Для Boostrap> 4 это сработало для меня:

.modal-content{
  width: 1200px;
}

более продвинутая версия:

body .modal-content{
  width: 160%!important;
  margin-left: -30%!important;
}

вот кодовая ручка:

https://codepen.io/AlfredoMoralesPinzon/pen/xyVOaK

Вы пробовали параметр размера:

return $modal.open({
  backdrop: 'static',     
  size: 'sm',                   
  templateUrl: "app/views/dialogs/error.html",
  controller: "errorDialogCtrl",

Дополнительные размеры

Модалы имеют два необязательных размера, доступные через классы-модификаторы для размещения в диалоговом окне .modal.

• default: 600px
• sm: маленький, ширина 300px
• lg: большой, ширина 900px

Если вы хотите что-то другое, обновите bootstarp.css

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
  .modal-xy {  // custom
    width: xxxpx;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

Просто установите высоту ".modal-body": 100% она автоматически отрегулирует высоту в соответствии с вашим контентом и поместит "max-height" в соответствии с вашим экраном...

Bootstrap Большая модель

<div class="modal-dialog modal-lg">

Bootstrap Маленькая модель

<div class="modal-dialog modal-sm">

Я недавно пытался это сделать и получил это правильно: Надеюсь, это будет полезно

 .modal .modal-body{
        height: 400px;
    }

Это отрегулирует высоту вашей модели.

Не забывайте о дополнительных классах начальной загрузки modal-lg и modal-sm, если вы хотите оставаться в рамках адаптивной среды. И добавьте clearfix ниже вашей формы, что может зависеть от вашей структуры.

Это сработало для меня:

#modal1 .modal 
{ 
     overflow-y: hidden; 
}

#modal1 .modal-dialog 
{ 
     height: 100%; 
     overflow-y: hidden; 
}

Обратите внимание, что в моем случае у меня есть вложенные модалы, у каждого из которых есть элементы управления, требующие разной высоты, когда я переключаю отображение управления внутри вложенного модального, поэтому я не мог применить max-height, вместо этого высота: 100% работает для меня хорошо.

Попробовал несколько из вышеперечисленных действий, поскольку нужно установить конкретные размеры ширины и высоты (чтобы отобразить изображение в модальном режиме), и, поскольку ни один из них не помог мне, я решил переопределить стили и добавил следующее к основному <div> , который имеет class= "модальное сглаживание" в нем: например, добавлена ​​ширина тега стиля для фона модального.

style="display: none; width:645px;"

а затем добавили следующие теги "style" в модальное тело:

<div class="modal-body" style="height:540px; max-height:540px; width:630px; max-width:630px;">

теперь работает как шарм, я показываю изображение, и теперь оно идеально подходит.

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

#modal1 .modal-body{
    max-height: 700px;
    overflow: visible;
}