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


84

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

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

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

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

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

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

ধন্যবাদ


আমি এই সমাধানটি খুঁজে পেয়েছি এবং ব্যবহার করে যাচ্ছি। এটি কীভাবে কেবল বুটস্ট্র্যাপ মডেলকে স্ক্রোল করতে দেয় এবং পটভূমির বিষয়বস্তুতে নয় সেটি খুব চতুর। github.com/aroc/Bootstrap-crol-Modal
রিচার্ড অ্যাডলেটা

উত্তর:


137

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

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

বিশদ:

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

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


4
আমি এটি আমার নিজের পক্ষে পেয়েছি তবে সত্যই এটি উইন্ডোটির অনুমতি অনুসারে লম্বা হওয়া উচিত, সর্বনিম্ন সাধারণ ডিনোমিনেটরের চেয়ে। তবে উল্লেখ করা max-height: 80%;কাজ করে না, এটি স্ক্রোলিংয়ের পরিবর্তে প্রসারিত হয়। সামঞ্জস্য করার জন্য আমাকে কি পুনরায় আকারের ইভেন্টগুলি ব্যবহার করতে হবে $(".modal")[0].style.maxHeight?
পিটার জিতেছে

18

আমি কেবল 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>

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


4
দুর্দান্ত সমাধান, তবে আমি উচ্চতা সর্বোচ্চ-উচ্চতায় পরিবর্তন করব
ওলেগ

4
এছাড়াও, আপনি $ ('। মডেল') ব্যবহার করতে পারেন on ('show.bs.modal', ফাংশন (ই) {}); সাইজিং ফাংশন ট্রিগার। এটি প্রতিটি আকার পরিবর্তন ও লোডের উপর ভিত্তি করে উচ্চতা কেবল প্রয়োজনীয় হিসাবে গণনা করবে। আপনার যদি বর্তমান মডেল সিএসএস গণনা / প্রয়োগের আগে কাস্টম স্ক্রোলের উচ্চতা ব্যবহার করে তবে আপনাকে ইভেন্টটির কার্যকারিতাটি পরীক্ষা করতে হবে। যেমন var স্ক্রোলমোডাল = $ ('। মডেল-বডি.মডাল-স্ক্রোল', এটি); যদি (স্ক্রোলমোডাল.লেন্থ) ...
রবার্ট ওয়াডেল

এটি কি বুটস্ট্র্যাপ 2 বা 3 এর জন্য?
গুপ্তচর

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

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

উৎস


বুটস্ট্র্যাপ কি 2 বা 3? প্রশ্নটি সম্ভবত বুটস্ট্র্যাপ 2
গুপ্তচর

@spy এই বুটস্ট্র্যাপ 3 জন্য
Guillaume, Renoult

8

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

 .modal {
position: fixed;

সঙ্গে:

.modal {
position: absolute;

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


4
এটি আইপ্যাডে প্রান্তিককরণের সমস্যা সৃষ্টি করে
ওলেগ

4

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

.modal { position: absolute; }

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

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

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

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


1

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

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

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


মার্জিন-টপ সরানো মডেলটিকে উন্নত করেছে যাতে এটি আই-তে স্ক্রিন থেকে দূরে থাকে না, তবে এখন এটি নির্দিষ্ট উইন্ডো আকারে পর্দায় কেবল কেন্দ্রিক (উল্লম্ব) is অন্যান্য সমস্ত আকারের স্ক্রিনের উপরে বা নীচে মডেল ওভারফ্লোগুলি।
ড্যান ডট নেট

4
@ ড্যান্ডোটনেট স্বয়ংক্রিয়ভাবে উইন্ডোর উপরের দিক থেকে 50% স্বয়ংক্রিয়ভাবে অবস্থান করে, আপনি এটি 10% এর মতো কম কিছু দিয়ে ওভাররাইট করতে পারেন, তবে আপনি যদি কোনও নেতিবাচক মান যুক্ত করেন তবে এটি আইইয়ের মতো স্ক্রিনটি বন্ধ হয়ে যাবে। যাইহোক, ফায়ার ফক্সেও একই ঘটনা ঘটে।
আন্দ্রেস ইলিচ

1

ব্যবহারের ক্ষেত্রে, .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);
});

1

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

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

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

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


1

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

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

0

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


4
আপনি আপনার উপসংহারটি কি ভিত্তি করেন?
রাফায়েল হার্সকোভিচি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.