1. 모달의 정확한 높이를 모르는 경우 어떻게 모달을 중앙에 수직으로 배치 할 수 있습니까?
높이를 선언하지 않고 Bootstrap 3 모달의 중심을 맞추려면 먼저 스타일 시트에 이것을 추가하여 Bootstrap CSS를 덮어 써야합니다.
.modal-dialog-center { /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}
그러면 모달 대화 상자의 왼쪽 상단 모서리가 창의 중앙에 배치됩니다.
이 미디어 쿼리를 추가해야합니다. 그렇지 않으면 소형 장치에서 모달 여백이 잘못되었습니다.
@media (max-width: 767px) {
.modal-dialog-center { /* Edited classname 10/03/2014 */
width: 100%;
}
}
이제 JavaScript로 위치를 조정해야합니다. 이를 위해 요소의 높이와 너비의 절반과 같은 음의 상단 및 왼쪽 여백을 제공합니다. 이 예제에서는 부트 스트랩과 함께 사용할 수 있으므로 jQuery를 사용합니다.
$('.modal').on('shown.bs.modal', function() {
$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});
업데이트 (01/10/2015) :
Finik의 답변 추가 . 미지의 센터링에 대한 크레딧 .
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* Adjusts for spacing */
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
부정적인 마진이 맞습니까? 인라인 블록으로 추가 된 공간을 제거합니다. 이 공간은 모달이 페이지의 맨 아래 @media width <768px로 점프하게합니다.
2. 모달이 화면 높이를 초과하는 경우에만 모달이 가운데에 있고 모달 바디에 overflow : auto가있을 수 있습니까?
이것은 모달 바디에 overflow-y : auto 및 max-height를 제공함으로써 가능합니다. 제대로 작동하려면 조금 더 많은 작업이 필요합니다. 이것을 스타일 시트에 추가하는 것으로 시작하십시오.
.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}
jQuery를 다시 사용하여 창 높이를 얻고 모달 컨텐츠의 최대 높이를 먼저 설정합니다. 그런 다음 모달 헤더와 모달 바닥 글로 모달 내용을 빼서 모달 바디의 최대 높이를 설정해야합니다.
$('.modal').on('shown.bs.modal', function() {
var contentHeight = $(window).height() - 60;
var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;
$(this).find('.modal-content').css({
'max-height': function () {
return contentHeight;
}
});
$(this).find('.modal-body').css({
'max-height': function () {
return (contentHeight - (headerHeight + footerHeight));
}
});
$(this).find('.modal-dialog').css({
'margin-top': function () {
return -($(this).outerHeight() / 2);
},
'margin-left': function () {
return -($(this).outerWidth() / 2);
}
});
});
당신은 부트 스트랩 3.0.3와 데모 여기서 일을 찾을 수 있습니다 http://cdpn.io/GwvrJ
편집 : 나는 더 많은 응답 솔루션을 대신 업데이트 된 버전을 사용하는 것이 좋습니다 : http://cdpn.io/mKfCc
업데이트 (2015 년 11 월 30 일) :
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() < 768 ? 20 : 60;
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'));
}
});
( 위의 편집으로 2015 년 11 월 30 일 http://cdpn.io/mKfCc 업데이트 )