1. Bagaimana Anda bisa memposisikan modal secara vertikal di tengah ketika Anda tidak tahu ketinggian yang tepat dari modal?
Untuk benar-benar memusatkan Modal Bootstrap 3 tanpa menyatakan tinggi, Anda harus terlebih dahulu menimpa CSS Bootstrap dengan menambahkan ini ke style sheet Anda:
.modal-dialog-center { /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}
Ini akan memposisikan modal-dialog sudut kiri atas di tengah jendela.
Kami harus menambahkan kueri media ini atau modal-kiri salah pada perangkat kecil:
@media (max-width: 767px) {
.modal-dialog-center { /* Edited classname 10/03/2014 */
width: 100%;
}
}
Sekarang kita perlu menyesuaikan posisinya dengan JavaScript. Untuk melakukan itu kita beri elemen margin atas dan kiri negatif sama dengan setengah dari tinggi dan lebarnya. Dalam contoh ini kita akan menggunakan jQuery karena tersedia dengan Bootstrap.
$('.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);
}
});
});
Pembaruan (01/10/2015):
Menambahkan jawaban Finik . Kredit untuk Centering di Unknown .
.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;
}
Perhatikan margin negatifnya, kan? Ini menghilangkan ruang yang ditambahkan oleh inline-block. Ruang itu menyebabkan modal untuk melompat ke bagian bawah halaman @ lebar media <768px.
2. Mungkinkah modal terpusat dan meluap: otomatis di badan modal, tetapi hanya jika modal melebihi ketinggian layar?
Ini dimungkinkan dengan memberikan modal-tubuh overflow-y: auto dan max-height. Ini membutuhkan sedikit usaha untuk membuatnya berfungsi dengan baik. Mulai dengan menambahkan ini ke style sheet Anda:
.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}
Kami akan menggunakan jQuery lagi untuk mendapatkan tinggi jendela dan mengatur max-tinggi modal-konten terlebih dahulu. Maka kita harus mengatur max-height dari modal-body, dengan mengurangkan konten modal dengan modal-header dan modal-footer:
$('.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);
}
});
});
Anda dapat menemukan demo yang berfungsi di sini dengan Bootstrap 3.0.3: http://cdpn.io/GwvrJ
EDIT: Saya sarankan menggunakan versi yang diperbarui sebagai gantinya untuk solusi yang lebih responsif: http://cdpn.io/mKfCc
Pembaruan (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'));
}
});
(Diperbarui 30/11/2015 http://cdpn.io/mKfCc dengan suntingan di atas)