1. जब आप मोडल की सही ऊँचाई नहीं जानते हैं तो आप केंद्र में मोडल को लंबवत कैसे रख सकते हैं?
ऊंचाई घोषित किए बिना बूटस्ट्रैप 3 मोडल को पूर्ण रूप से केंद्र में रखने के लिए, आपको सबसे पहले बूटस्ट्रैप सीएसएस को अपनी स्टाइल शीट में जोड़कर इसे ओवरराइट करना होगा:
.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%;
}
}
अब हमें जावास्क्रिप्ट के साथ इसकी स्थिति को समायोजित करने की आवश्यकता होगी। ऐसा करने के लिए हम तत्व को उसकी ऊँचाई और चौड़ाई के आधे हिस्से के बराबर एक नकारात्मक शीर्ष और बायाँ मार्जिन देते हैं। इस उदाहरण में हम 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):
फिनिक के उत्तर पर जोड़ना । अज्ञात में केंद्रित करने का श्रेय ।
.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;
}
नकारात्मक मार्जिन-सही को नोटिस करें? यह इनलाइन-ब्लॉक द्वारा जोड़े गए स्थान को हटा देता है। उस स्थान के कारण मोडल पेज @ तल की चौड़ाई के नीचे कूद जाता है <768px।
2. क्या यह संभव है कि मॉडल केंद्रित है और अतिप्रवाह है: मोडल-बॉडी में ऑटो, लेकिन केवल तभी जब मोडल स्क्रीन की ऊँचाई से अधिक हो?
यह मोडल-बॉडी को एक अतिप्रवाह-वाई: ऑटो और एक अधिकतम ऊंचाई देकर संभव है। इसे ठीक से काम करने में थोड़ा अधिक काम लगता है। इसे अपनी शैली पत्रक में जोड़ने के साथ शुरू करें:
.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
EDIT: मैं एक अधिक उत्तरदायी समाधान के लिए अद्यतन संस्करण का उपयोग करने की सलाह देता हूं: 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/2015 http://cdpn.io/mKfCc उपरोक्त संपादित करें)