Я ищу способ сохранить модальный диалог в границах экрана, т.е. его высота всегда меньше высоты экрана и соответственно изменяется ширина. Я пробовал:
.modal-dialog {
max-height: 100%;
}
но это не имеет никакого эффекта.
Иллюстрация:
Я предпочитаю чистое решение CSS (нет js), если оно существует. Для ясности я ищу максимальную высоту, а не высоту (т.е. Модальный не выше экрана, оставьте его как есть).
Используйте единицы просмотра с calc. Вот так:
.img-responsive {
max-height: calc(100vh - 225px);
}
... где 225px соответствует объединенной высоте верхней и нижней частей окна просмотра, которые окружают диалог.
Кроме того, чтобы позаботиться о ширине модальности, нам нужно установить еще несколько свойств:
.modal {
text-align:center;
}
.modal-dialog {
display: inline-block;
width: auto;
}
Мы можем заменить calc на метод заполнения + отрицательного поля следующим образом:
.img-responsive {
max-height: 100vh;
margin: -113px 0;
padding: 113px 0;
}
Поддержка PS: для браузеров: очень хорошо
Поскольку значение по умолчанию установлено в 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:
Если вы гарантируете, что родительские элементы имеют установленную высоту, вы должны сделать это довольно легко. Я дал верхний и нижний колонтитулы высотой в 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%;
}
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));
});
Если вы обеспечиваете максимальную высоту и максимальную ширину до 100%, тогда она будет автоматически автоматически отображаться на экране, но по мере того, как вы хотите, чтобы размер этого диалогового окна был меньше, вам нужно будет установить максимальную высоту и максимальную ширину для некоторого значения исправления. Поскольку вы уже использовали диалоговое окно отзывчивой модели, это автоматически изменит размер диалогового окна в соответствии с вашим размером экрана.
Попробуйте выполнить css, он может работать согласно вашему требованию. вы можете изменить максимальную высоту и максимальную ширину соответственно, маржу-левую и правую маржу для выравнивания по центру.
.modal-dialog {
max-height: 225px;
max-width: 200px;
margin-left: auto;
margin-right: auto;
}
Надеюсь, это может вам помочь.!!
Попробуйте выполнить 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;
}
Сначала установите размер контейнера, затем установите размер модального диалогового окна.
Например:
.modal{height:100%;width:50%;margin: 0 auto;}
.modal-dialog{overflow:hidden; max-height:96%;}
Я думаю, вы должны использовать overflow: hidden в .modal-dialog со стилем, чтобы поддерживать пропорции изображения.