Как поместить полосу прокрутки только для модального тела в модальное диалоговое окно bootstrap
У меня есть следующий элемент
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" >
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
он показывает модальный диалог что-то вроде этого, в основном он помещает полосу прокрутки вокруг всего модального диалога, а не модального тела, которое содержит содержимое, которое я пытаюсь отобразить.
изображение выглядит примерно так -http://imgur.com/0ZZRjnJ
Как получить полосу прокрутки вокруг только модального тела? Я попытался назначить style= "overflow-y: scroll; max-height: 85%; margin-top: 50px; margin-bottom:50px;" для модальное тело и это не сработало.
9 ответов
вы должны установить height
на .modal-body
и это overflow-y: auto
. Также сбросить .modal-dialog
переполнение значения!--5-->.
посмотреть рабочий пример:
http://www.bootply.com/T0yF2ZNTUd
.modal{
display: block !important; /* I added this to see the modal, you don't need this */
}
/* Important part */
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 250px;
overflow-y: auto;
}
Если вы поддерживаете только IE 9 или выше, вы можете использовать этот CSS, который будет плавно масштабироваться до размера окна. Вам может потребоваться настроить "200px", хотя, в зависимости от высоты вашего верхнего или нижнего колонтитула.
.modal-body{
max-height: calc(100vh - 200px);
overflow-y: auto;
}
проблема решена с комбинированным решением @carlos calla и @jonathan marston.
/* Important part */
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
max-height: calc(100vh - 200px);
overflow-y: auto;
}
на Карлос Каллыотличный ответ.
высоту .модально-тело должно быть установлено, но вы можете использовать медиа-запросы, чтобы убедиться, что он соответствует размеру экрана.
.modal-body{
height: 250px;
overflow-y: auto;
}
@media (min-height: 500px) {
.modal-body { height: 400px; }
}
@media (min-height: 800px) {
.modal-body { height: 600px; }
}
дополнительно: Если вы не хотите, чтобы модальный превысил высоту окна и использовал полосу прокрутки в.modal-body, вы можете использовать это отзывчивое решение. См. рабочую демонстрацию здесь:http://codepen.io/dimbslmh/full/mKfCc/
function setModalMaxHeight(element) {
this.$element = $(element);
this.$content = this.$element.find('.modal-content');
var borderWidth = this.$content.outerHeight() - this.$content.innerHeight();
var dialogMargin = $(window).width() > 767 ? 60 : 20;
var contentHeight = $(window).height() - (dialogMargin + borderWidth);
var headerHeight = this.$element.find('.modal-header').outerHeight() || 0;
var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0;
var maxHeight = contentHeight - (headerHeight + footerHeight);
this.$content.css({
'overflow': 'hidden'
});
this.$element
.find('.modal-body').css({
'max-height': maxHeight,
'overflow-y': 'auto'
});
}
$('.modal').on('show.bs.modal', function() {
$(this).show();
setModalMaxHeight(this);
});
$(window).resize(function() {
if ($('.modal.in').length != 0) {
setModalMaxHeight($('.modal.in'));
}
});
или проще вы можете поместить между тегами сначала, а затем в класс css.
<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>
Я знаю, это старая тема, но это может помочь кому-то еще.
я смог сделать прокрутку тела, сделав положение элемента модального диалога фиксированным. И так как я никогда не узнаю точную высоту окна браузера, я взял информацию, в которой был уверен, высоту верхнего и нижнего колонтитулов. Затем я смог сделать верхние и Нижние поля элемента модального тела соответствующими этим высотам. Это дало результат, который я искал. Я собрал скрипку, чтобы покажи мою работу.
кроме того, если вы хотите, чтобы полноэкранный диалог просто не комментировал ширину:авто; внутри.модальное диалоговое окно.полноэкранный раздел.
https://jsfiddle.net/lot224/znrktLej/
и вот css, который я использовал для изменения диалогового окна начальной загрузки.
.modal-dialog.full-screen {
position:fixed;
//width:auto; // uncomment to make the width based on the left/right attributes.
margin:auto;
left:0px;
right:0px;
top:0px;
bottom:0px;
}
.modal-dialog.full-screen .modal-content {
position:absolute;
left:10px;
right:10px;
top:10px;
bottom:10px;
}
.modal-dialog.full-screen .modal-content .modal-header {
height:55px; // adjust as needed.
}
.modal-dialog.full-screen .modal-content .modal-body {
overflow-y: auto;
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
margin-top: 55px; // .modal-header height
margin-bottom: 80px; // .modal-footer height
}
.modal-dialog.full-screen .modal-content .modal-footer {
height:80px; // adjust as needed.
position:absolute;
bottom:0;
left:0;
right:0;
}
простое решение js для установки модальной высоты, пропорциональной высоте тела:
$(document).ready(function () {
$('head').append('<style type="text/css">.modal .modal-body {max-height: ' + ($('body').height() * .8) + 'px;overflow-y: auto;}.modal-open .modal{overflow-y: hidden !important;}</style>');
});
высота тела должна быть 100%:
html, body {
height: 100%;
min-height: 100%;
}
Я установил модальную высоту тела до 80% из тела, это можно конечно подгонять.
надеюсь, что это помогает.
#scroll-wrap {
max-height: 50vh;
overflow-y: auto;
}
используя max-height
С vh
единица на modal-body
или обертка div внутри modal-body
. Это изменит высоту modal-body
или обертывание div (в этом примере) автоматически, когда пользователь изменяет размер окна.
vh
- единица длины, представляющая 1% от размера окна просмотра для высоты окна просмотра.
совместимость с браузерами график vh
единица.
пример: https://jsfiddle.net/q3xwr53f/