Как ограничить высоту модальности?

Я ищу способ сохранить модальный диалог в границах экрана, т.е. его высота всегда меньше высоты экрана и соответственно изменяется ширина. Я пробовал:

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

но это не имеет никакого эффекта.

http://jsfiddle.net/ma4zn5gv/

Иллюстрация:

enter image description here

Я предпочитаю чистое решение CSS (нет js), если оно существует. Для ясности я ищу максимальную высоту, а не высоту (т.е. Модальный не выше экрана, оставьте его как есть).

Ответы

Ответ 1

Используйте единицы просмотра с calc. Вот так:

.img-responsive {
    max-height: calc(100vh - 225px);
}

... где 225px соответствует объединенной высоте верхней и нижней частей окна просмотра, которые окружают диалог.

Кроме того, чтобы позаботиться о ширине модальности, нам нужно установить еще несколько свойств:

.modal {
    text-align:center;
}
.modal-dialog {
    display: inline-block;
    width: auto;
}

Обновлено Fiddle (Измените размер высоты видового экрана, чтобы увидеть эффект)

В качестве альтернативы:

Мы можем заменить calc на метод заполнения + отрицательного поля следующим образом:

.img-responsive {
    max-height: 100vh;
    margin: -113px 0;
    padding: 113px 0;
}

FIDDLE

Поддержка PS: для браузеров: очень хорошо

Ответ 2

Поскольку значение по умолчанию установлено в auto и 100% по ширине и высоте. вы просто сможете изменить; изображение внутри окна просмотра и идентификатор цели, как показано ниже:

/*let target has the same value as modal-dialog*/
#myModal {
    width:auto;
    height:auto;
    margin:0 auto;
}
/*modify image inside modal-dialog*/
.modal-dialog,.modal-dialog img { /*same value to avoid overwidth*/
    width:70%;
    height:70%;
    margin:0 auto;
}

Здесь DEMO в jsfiddle.

Вы также можете разделить его на:

.modal-dialog img {
    width:100%;
    height:100%;
    margin:0 auto;
}
.modal-dialog {/*modify the modal-dialog*/
/*ONLY CHANGE THIS, NOT others (#myModal or .modal-image img)*/
    width:60%;
    height:60%;
    margin:0 auto;
}

ОБНОВЛЕНО DEMO:

Ответ 3

Если вы гарантируете, что родительские элементы имеют установленную высоту, вы должны сделать это довольно легко. Я дал верхний и нижний колонтитулы высотой в 10 процентов, а тело 80 процентов, так что все это добавляет до 100:)

.modal, .modal-dialog, .modal-content{
  height: 100%;

}
.modal-header, .modal-footer {height:10%;}
.modal-body {height:80%;}
.img-responsive {
    max-height:100%;
}

Ответ 4

Script

$('#myModal').on('show.bs.modal', function () {
$('.modal-content').css('max-height',$( window ).height()*0.8);
$('.modal-content img').css('max-height',(($( window ).height()*0.8)-86));
});

Fiddle

Ответ 5

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

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

 .modal-dialog {
      max-height: 225px;
      max-width:  200px; 
      margin-left: auto;
      margin-right: auto;
    }

Надеюсь, это может вам помочь.!!

Ответ 6

Попробуйте выполнить Fiddle с некоторыми изменениями css.

CSS

.modal-dialog {
 height: 100%;
 margin: 0;
 padding: 10px;
}
.modal-content { height:100%; }
.modal-body {
position: absolute;
padding: 15px;
left:0;
right:0;
top: 55px;
bottom: 65px;
margin: auto;
}
.modal-body > p {
height: 100%;
margin: 0;
}
.img-responsive{
max-height: 100%;
max-width: 100%;
margin:auto;
}
.modal-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}

Ответ 7

Сначала установите размер контейнера, затем установите размер модального диалогового окна.

Например:

.modal{height:100%;width:50%;margin: 0 auto;}
.modal-dialog{overflow:hidden; max-height:96%;}

Fiddle

Ответ 8

Я думаю, вы должны использовать overflow: hidden в .modal-dialog со стилем, чтобы поддерживать пропорции изображения.