1. คุณสามารถวางตำแหน่งคำกริยาในแนวตั้งตรงกลางเมื่อคุณไม่ทราบความสูงที่แท้จริงของคำกริยา?
ในการที่จะอยู่ตรงกลางของ Bootstrap 3 Modal โดยไม่ต้องประกาศความสูงคุณจะต้องเขียนทับ 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 เนื่องจากมันมีอยู่ใน 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);
}
});
});
อัปเดต (01/10/2015):
เพิ่มในคำตอบของ Finik เครดิตCentering ในที่ไม่รู้จัก
.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;
}
สังเกตเห็นว่าระยะขอบติดลบ - ใช่ไหม? สิ่งนี้จะลบพื้นที่ที่เพิ่มโดย inline-block ช่องว่างนั้นทำให้โมดัลข้ามไปที่ด้านล่างของหน้า @media width <768px
2. เป็นไปได้หรือไม่ที่จะมีคำกริยาที่กึ่งกลางและมีความล้น: อัตโนมัติในตัวโมดอล
สิ่งนี้เป็นไปได้โดยให้โมดัล - โอเวอร์โฟลว์ -y: อัตโนมัติและความสูงสูงสุด การทำงานนี้ต้องใช้เวลาอีกเล็กน้อยจึงจะทำงานได้อย่างถูกต้อง เริ่มด้วยการเพิ่มสิ่งนี้ลงในสไตล์ชีทของคุณ:
.modal-body {
overflow-y: auto;
}
.modal-footer {
margin-top: 0;
}
เราจะใช้ jQuery อีกครั้งเพื่อรับความสูงของหน้าต่างและตั้งค่าความสูงสูงสุดของเนื้อหาโมดอลก่อน จากนั้นเราต้องตั้งค่าความสูงสูงสุดของ modal-body โดยการลบ modal-content ด้วย modal-header และ 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);
}
});
});
คุณสามารถค้นหาตัวอย่างการทำงานได้ที่นี่ด้วย Bootstrap 3.0.3: http://cdpn.io/GwvrJ
แก้ไข: ฉันขอแนะนำให้ใช้รุ่นที่อัปเดตแทนวิธีการแก้ปัญหาที่ตอบสนองมากขึ้น: http://cdpn.io/mKfCc
อัปเดต (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'));
}
});
(อัปเดต 30/11/2558 http://cdpn.io/mKfCcพร้อมการแก้ไขด้านบน)