1. Kipin tam yüksekliğini bilmediğinizde kipi nasıl ortada dikey olarak konumlandırabilirsiniz?
Bir yükseklik bildirmeden Bootstrap 3 Modal'ı mutlak ortalamak için, önce stil sayfanıza ekleyerek Bootstrap CSS'nin üzerine yazmanız gerekir:
.modal-dialog-center { /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}
Bu, kalıcı iletişim kutularını sol üst köşeyi pencerenin ortasına yerleştirecektir.
Bu medya sorgusunu eklememiz gerekiyor, aksi takdirde küçük cihazlarda sol kenar boşluğu yanlış:
@media (max-width: 767px) {
.modal-dialog-center { /* Edited classname 10/03/2014 */
width: 100%;
}
}
Şimdi JavaScript ile konumunu ayarlamamız gerekecek. Bunu yapmak için elemana boyunun ve genişliğinin yarısına eşit negatif bir üst ve sol kenar boşluğu veririz. Bu örnekte Bootstrap ile kullanılabildiği için jQuery kullanacağız.
$('.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);
}
});
});
Güncelleme (01/10/2015):
Finik'in cevabına ekleme . Bilinmeyende Merkezlemeye Verilen Krediler .
.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;
}
Negatif kenar boşluğuna dikkat edin değil mi? Bu, satır içi bloğun eklediği alanı kaldırır. Bu boşluk, modalın @media width <768px sayfasının altına atlamasına neden olur.
2. Kipin ortalanması ve taşması olabilir: kipte gövdede otomatik, ancak kip yalnızca ekran yüksekliğini aşarsa?
Bu, modal gövdeye taşma-y: otomatik ve maksimum yükseklik vererek mümkündür. Bu, düzgün çalışması için biraz daha fazla iş gerektirir. Bunu stil sayfanıza ekleyerek başlayın:
.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}
Pencere yüksekliğini almak ve önce modsal içeriğin maksimum yüksekliğini ayarlamak için jQuery'yi tekrar kullanacağız. Daha sonra modal içeriği modal üstbilgi ve modal altbilgi ile çıkararak modal gövdenin maksimum yüksekliğini ayarlamamız gerekir:
$('.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);
}
});
});
Bootstrap 3.0.3 ile çalışan bir demo bulabilirsiniz: http://cdpn.io/GwvrJ
EDIT: Daha duyarlı bir çözüm için güncellenmiş sürümü kullanmanızı tavsiye ederim: http://cdpn.io/mKfCc
Güncelleme (30/11/2015):
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'));
}
});
( Yukarıdaki düzenleme ile 30/11/2015 http://cdpn.io/mKfCc güncellendi )