১. আপনি যখন মডেলের সঠিক উচ্চতা জানেন না তখন আপনি কেন মাঝখানে মডেলটিকে উল্লম্বভাবে অবস্থান করতে পারেন?
কোনও উচ্চতা ঘোষণা না করে বুটস্ট্র্যাপ 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%;
}
}
এখন আমাদের জাভাস্ক্রিপ্টের সাথে এর অবস্থানটি সামঞ্জস্য করতে হবে। এটি করার জন্য আমরা উপাদানটিকে তার উচ্চতা এবং প্রস্থের অর্ধের সমান aণাত্মক শীর্ষ এবং বাম মার্জিনটি দেই। এই উদাহরণে আমরা 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 পৃষ্ঠার নীচে লাফিয়ে তুলতে বাধ্য করে।
২. মডেল কেন্দ্রিক এবং ওভারফ্লো হওয়া সম্ভব: মডেল-বডিতে অটো, তবে কেবল যদি মডেলটি স্ক্রিনের উচ্চতা ছাড়িয়ে যায়?
মডেল-বডিকে একটি ওভারফ্লো-ওয়াই: অটো এবং সর্বোচ্চ-উচ্চতা দিয়ে এটি সম্ভব। এটি সঠিকভাবে কাজ করতে আরও কিছুটা সময় লাগে। আপনার স্টাইল শীটে এটি যুক্ত করে শুরু করুন:
.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.০.৩ সহ একটি ওয়ার্কিং ডেমো খুঁজে পেতে পারেন: 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/2015 http://cdpn.io/mKfCc আপডেট হয়েছে )