1. Làm thế nào bạn có thể định vị phương thức theo chiều dọc ở trung tâm khi bạn không biết chiều cao chính xác của phương thức?
Để tập trung tuyệt đối vào Modst Bootstrap 3 mà không cần khai báo chiều cao, trước tiên bạn sẽ cần ghi đè CSS Bootstrap bằng cách thêm phần này vào biểu định kiểu của bạn:
.modal-dialog-center { /* Edited classname 10/03/2014 */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
}
Điều này sẽ định vị các hộp thoại phương thức góc trên cùng bên trái ở giữa cửa sổ.
Chúng tôi phải thêm truy vấn phương tiện này nếu không, lề trái phương thức bị sai trên các thiết bị nhỏ:
@media (max-width: 767px) {
.modal-dialog-center { /* Edited classname 10/03/2014 */
width: 100%;
}
}
Bây giờ chúng ta sẽ cần điều chỉnh vị trí của nó với JavaScript. Để làm điều đó, chúng tôi cung cấp cho phần tử một đỉnh âm và lề trái bằng một nửa chiều cao và chiều rộng của nó. Trong ví dụ này, chúng tôi sẽ sử dụng jQuery vì nó có sẵn với 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);
}
});
});
Cập nhật (01/10/2015):
Thêm vào câu trả lời của Finik . Tín dụng để định tâm trong Không xác định .
.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;
}
Chú ý lề âm phải không? Điều này loại bỏ không gian được thêm bởi khối nội tuyến. Không gian đó làm cho phương thức nhảy xuống cuối trang @media width <768px.
2. Có thể có chế độ tập trung vào trung tâm và có tràn: tự động trong cơ thể phương thức, nhưng chỉ khi phương thức vượt quá chiều cao màn hình?
Điều này có thể thực hiện được bằng cách cung cấp cho cơ thể phương thức một overflow-y: auto và max-height. Điều này cần thêm một chút công việc để làm cho nó hoạt động đúng. Bắt đầu với việc thêm phần này vào biểu định kiểu của bạn:
.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}
Chúng tôi sẽ sử dụng lại jQuery để lấy chiều cao cửa sổ và đặt chiều cao tối đa của nội dung phương thức trước. Sau đó, chúng ta phải đặt chiều cao tối đa của cơ thể phương thức, bằng cách trừ nội dung phương thức với tiêu đề phương thức và chân phương thức:
$('.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);
}
});
});
Bạn có thể tìm thấy bản demo hoạt động ở đây với Bootstrap 3.0.3: http://cdpn.io/GwvrJ
EDIT: Tôi khuyên bạn nên sử dụng phiên bản cập nhật thay thế cho một giải pháp đáp ứng nhanh hơn: http://cdpn.io/mKfCc
Cập nhật (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'));
}
});
(Cập nhật 30/11/2015 http://cdpn.io/mKfCc với chỉnh sửa ở trên)