টুইটার বুটস্ট্র্যাপ স্ক্রোলযোগ্য মোডাল

Question 1

আমি যে প্রকল্পে কাজ করছি তার জন্য আমি টুইটার বুটস্ট্র্যাপ ব্যবহার করছি।

আমার একটি মোডাল উইন্ডো রয়েছে যার কিছুটা দীর্ঘ আকার রয়েছে এবং আমি উইন্ডোটি খুব ছোট হয়ে গেলে মডেলটি স্ক্রোল করে না (যদি কেবল আমার পৃষ্ঠাটি যা স্ক্রোলযোগ্য নয় তা অদৃশ্য হয়ে যায়) like

এটি ঠিক করতে আমি নিম্নলিখিত সিএসএস ব্যবহার করেছি

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

এটি ক্রোমে যেমনভাবে চাই ঠিক তেমনভাবে কাজ করে (এটি উইন্ডোটি যথেষ্ট বড় হলে ফর্মটি পূর্ণ আকারের হয়, তবে উইন্ডোটি মোডালগুলি সঙ্কুচিত করে স্ক্রোলযোগ্য হয়ে যায়)। সমস্যাটি হ'ল আইই-তে মডেলটি স্ক্রিনের বাইরে। কারও কি এই সমস্যার আরও ভাল সমাধান আছে?

আমার উদাহরণটি tinyhousemap.com এ পাওয়া যাবে (মডেলটি উপস্থিত হওয়ার জন্য নেভিগেশন উইন্ডোতে 'মানচিত্রে একটি প্রবেশ যুক্ত করুন' ক্লিক করুন)

ধন্যবাদ

Question 2

নীচের সমাধান সম্পর্কে কীভাবে? এটা আমার জন্য কাজ করেছে। এটা চেষ্টা কর:

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

বিশদ:

মোডাল ক্লাস (মুখ্য) থেকে সরান overflow-y: auto;বা overflow: auto;থেকে
ক্লাস max-height: 400px;থেকে অপসারণ .modal(গুরুত্বপূর্ণ)
যোগ max-height: 400px;করার জন্য .modal .modal শরীর (অথবা কি কখনো কি হতে পারে 420pxবা তার কম, কিন্তু বেশী না 450px)
যোগ overflow-y: auto;করুন.modal .modal-body

হয়ে গেছে, কেবলমাত্র শরীর স্ক্রোল করবে।

Question 3

আমি কেবল jQuery ব্যবহার করে একটি ছোট সমাধান করেছি।

প্রথমে, আপনাকে <div class="modal-body">আমার "আটিভা-স্ক্রোল" নামে একটি অতিরিক্ত ক্লাস দেওয়া দরকার , তাই এটি এরকম কিছু হয়ে যায়:

<div class="modal-body ativa-scroll">

সুতরাং এখন আপনার জেএস লোডিংয়ের কাছে আপনার কোডটিতে এই কোডের টুকরোটি রাখুন:

<script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>

আমি আমার জন্য পুরোপুরি কাজ করি, প্রতিক্রিয়াশীল উপায়েও! :)

Question 4

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

এটি জেএস কোড ছাড়াই বুটস্ট্র্যাপ 3 এর জন্য কাজ করে এবং প্রতিক্রিয়াশীল।

উৎস

Question 5

বুটস্ট্র্যাপের চেষ্টা ও ওভাররাইড করুন:

 .modal {
position: fixed;

সঙ্গে:

.modal {
position: absolute;

এটা আমার জন্য কাজ করেছে।

Question 6

আমিও যুক্ত করেছিলাম

.modal { position: absolute; }

ডায়ালগটি স্ক্রোল করার অনুমতি দেওয়ার জন্য স্টাইলশিটে, তবে ব্যবহারকারী যদি দীর্ঘ পৃষ্ঠার নীচে চলে যায় তবে মডেলটি দৃশ্যমান অঞ্চলের শীর্ষে লুকিয়ে থাকতে পারে।

আমি বুঝতে পেরেছি এটি বুটস্ট্র্যাপ 3-এ আর কোনও সমস্যা নয়, তবে আপগ্রেড হওয়া অবধি অপেক্ষাকৃত দ্রুত সমাধানের সন্ধান করছি আমি উপরের প্লাসটি শেষ না করে মডেলটি খোলার আগে নিম্নলিখিতটি কল করেছিলাম

$('.modal').css('top', $(document).scrollTop() + 50);

ফায়ারফক্স, ক্রোম, IE10 8 এবং 7 তে খুশি বলে মনে হচ্ছে (যে ব্রাউজারগুলি আমি হস্তান্তরিত করেছি)

Question 7

আপনার মডেলটি ফায়ারফক্সে লুকানো হচ্ছে এবং এটি আপনার সাধারণ স্টাইলশিটের অভ্যন্তরে নেতিবাচক মার্জিন ঘোষণার কারণে:

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

নেতিবাচক মার্জিন সরান এবং সবকিছু ঠিকঠাক কাজ করে।

Question 8

ব্যবহারের ক্ষেত্রে, .modal {overflow-y: auto;}পৃষ্ঠার ডানদিকে অতিরিক্ত স্ক্রোল বার তৈরি করবে, যখন দেহটি ইতিমধ্যে উপচে পড়েছে।

এই জন্য প্রায় কাজ অপসারণ করা হয় ওভারফ্লো থেকে শরীর ট্যাগ সাময়িকভাবে এবং সেট মোডাল ওভারফ্লো-Y করার স্বয়ংক্রিয় ।

উদাহরণ:

$('.myModalSelector').on('show.bs.modal', function () {

        // Store initial body overflow value
        _initial_body_overflow = $('body').css('overflow');

        // Let modal be scrollable
        $(this).css('overflow-y', 'auto');
        $('body').css('overflow', 'hidden');


    }).on('hide.bs.modal', function () {

        // Reverse previous initialization
        $(this).css('overflow-y', 'hidden');
        $('body').css('overflow', _initial_body_overflow);
});

Question 9

@ গ্রেনল্টের সিএসএস সলিউশন (যা বেশিরভাগ কাজ করে) এর সমস্যাটি হ'ল এটি সম্পূর্ণ প্রতিক্রিয়াশীল এবং মোবাইলে যখন কীবোর্ড পপ আপ হয় (যেমন তারা যখন মডেল ডায়ালগের কোনও ইনপুটটিতে ক্লিক করেন) তখন স্ক্রিনের আকার পরিবর্তন হয় এবং মডেল ডায়ালগটির আকার পরিবর্তন হয় এবং এটি কেবল ক্লিক করা ইনপুটটি লুকিয়ে রাখতে পারে যাতে তারা কী টাইপ করছে তা তারা দেখতে পায় না।

আমার জন্য আরও ভাল সমাধানটি ছিল নিম্নরূপে jquery ব্যবহার করা:

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

এটি উইন্ডোর আকার পরিবর্তন করার জন্য প্রতিক্রিয়াশীল নয়, তবে এটি প্রায়শই ঘটে না।

Question 10

আমি। শরীরের উপাদানগুলিতে সর্বোচ্চ উচ্চতার সাথে "ভিএইচ" মেট্রিক ব্যবহার করে এটি কাটিয়ে উঠতে সক্ষম হয়েছি। 70 ভিএইচ আমার ব্যবহারের জন্য সঠিক তাকিয়ে ছিল। তারপরে ওভারফ্লো-ওয়াইটিকে অটোতে সেট করুন যাতে এটি যখন প্রয়োজন হয় কেবল তখন স্ক্রল করে।

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}

Question 11

এর কোনটি আশানুরূপভাবে কাজ করবে না .. সঠিক উপায় হ'ল অবস্থান পরিবর্তন করা: স্থির থেকে অবস্থান: আধুনিক শ্রেণির জন্য পরম