আমি যখন আমার পৃষ্ঠায় কোনও মডেল ভিউ ট্রিগার করি তখন এটি স্ক্রোল বারটি অদৃশ্য হয়ে যায়। এটি একটি বিরক্তিকর প্রভাব কারণ যখন মোডাল সরে / অদৃশ্য হয়ে যায় তখন পটভূমি পৃষ্ঠাটি চলতে শুরু করে। এই প্রভাবের কোনও প্রতিকার আছে কি?
আমি যখন আমার পৃষ্ঠায় কোনও মডেল ভিউ ট্রিগার করি তখন এটি স্ক্রোল বারটি অদৃশ্য হয়ে যায়। এটি একটি বিরক্তিকর প্রভাব কারণ যখন মোডাল সরে / অদৃশ্য হয়ে যায় তখন পটভূমি পৃষ্ঠাটি চলতে শুরু করে। এই প্রভাবের কোনও প্রতিকার আছে কি?
উত্তর:
এই বৈশিষ্ট্য ক্লাস হয়, modal-openHTML এ যোগ পরার bodyযখন আপনি মোডাল দেখাই, এবং সরানো যখন আপনি এটি লুকান।
এটি বুটস্ট্র্যাপ সিএসএস বলার পর থেকে স্ক্রোলবার অদৃশ্য হয়ে যায়
.modal-open {
overflow: hidden;
}
আপনি নির্দিষ্ট করে এটিকে ওভাররাইড করতে পারেন
.modal-open {
overflow: scroll;
}
মধ্যে আপনার নিজের CSS।
<style></style>অভ্যন্তরে অন্তর্ভুক্ত templateUrlকরতে পারে যাতে এটি অ্যাপ্লিকেশনটিতে অন্য মডেলের উপর চাপ না দেয়।
আমি মনে করি যে উত্তরাধিকারী স্ক্রোলের চেয়ে ভাল, কারণ আপনি যখন মোডাল খুলবেন, এটি সর্বদা স্ক্রোল দিয়ে খোলা থাকবে, কিন্তু যখন আপনার কোনও স্ক্রোল নেই তখন আপনি একই সমস্যা পাবেন। সুতরাং আমি কেবল এটি করি:
.modal-open {
overflow: inherit;
}
আমি ব্যবহার করতাম
.modal-open {
overflow-y: scroll;
}
এই ক্ষেত্রে আপনি অনুভূমিক স্ক্রোল বারটি প্রদর্শন করা এড়িয়ে যাবেন
ওভারফ্লো-ওয়াই ব্যবহার করা আরও ভাল: শরীর থেকে প্যাডিং স্ক্রোল করুন এবং মুছুন, বুটস্ট্র্যাপ মডেল প্যাড বডিতে প্যাডিং যুক্ত করুন।
.modal-open {
overflow:hidden;
overflow-y:scroll;
padding-right:0 !important;
}
IE ব্রাউজার সামঞ্জস্যপূর্ণ: IE ব্রাউজারটি ডিফল্টরূপে একই কাজ করে।
Godশ্বরের ধন্যবাদ আমি এই পোস্ট জুড়ে এসেছি! আমি আমার নিজের ঘনিষ্ঠ লিঙ্কটি ব্যবহার করে উইন্ডোটি বন্ধ করার সময় কীভাবে আমার স্ক্রোলবারগুলি ফিরিয়ে আনতে পারি তার চেষ্টা করার জন্য আমি আমার চুলগুলি টানছিলাম। আমি সিএসএসের জন্য পরামর্শগুলি চেষ্টা করেছি তবে এটি ঠিকভাবে কাজ করছে না। পড়ার পর
আপনি যখন মডেলটি দেখান তখন ক্লাস মডেল-ওপেন এইচটিএমএল বডিতে যুক্ত হয় এবং আপনি যখন এটি লুকিয়ে রাখেন তখন সরিয়ে ফেলা হয়। - @ ফ্লুআপ
আমি jquery ব্যবহার করে একটি সমাধান নিয়ে এসেছি, সুতরাং অন্য কারও ক্ষেত্রে একই সমস্যা রয়েছে এবং উপরের পরামর্শগুলি কাজ করে না -
<script>
jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
jQuery('body').removeClass('modal-open');
});
});
</script>
data-dismiss="modal"এই জাতীয় কিছু কাস্টম না করে আপনার কেবল আপনার লিঙ্কে একটি বৈশিষ্ট্য যুক্ত করা উচিত । সেই লিঙ্কটি ক্লিক করা হলে বুটস্ট্র্যাপ সমস্ত উপযুক্ত বন্ধকরণ ক্রিয়া করবে।
আমি কেবল বুটস্ট্র্যাপ মডেলের এই 'বৈশিষ্ট্য' নিয়ে খেলছিলাম। .modalক্লাসটি দেখে মনে হচ্ছে overflow-y:auto;সুতরাং মোডাল নিজেই উচ্চ হয়ে উঠলে মডেল র্যাপার তার নিজস্ব স্ক্রোলবারটি পায়।
আপনি যদি সর্বদা স্ক্রোলবার চান (ডিজাইনাররা প্রায়শই করেন) প্রথমে শরীর সেট করুন
body {
overflow-y:scroll;
}
তারপরে হ্যান্ডেল করুন .modal-open
.modal-open .modal {
overflow-y:scroll; /* Force a navbar on .modal */
}
.modal-open .topnavbar-wrapper {
padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}
এক্ষেত্রে শরীরের উপর অচলিত স্ক্রোলবারটি অক্ষম করুন
এই পৃষ্ঠার অন্যান্য সমস্ত উত্তর আমার সামগ্রীতে ঝাঁপিয়ে পড়েছে।
মাথা উঁচু করে!
যদিও এই সমাধানটি আমার জন্য সর্বদা কাজ করে, গতকাল আমি যখন এই মডেলটি টেনে আনে এবং স্ক্রিনে (উল্লম্বভাবে) ফিট করতে পারি তখন এই ফিক্সটি ব্যবহার করতে আমার একটি সমস্যা হয়েছিল। এটি position:stickyযুক্ত করা উপাদানগুলির সাথে কিছু করার থাকতে পারে ?
আপনার বুটস্র্যাপের একটি নির্দিষ্ট অংশটি কাস্টমাইজ করতে আপনি নিজের সিএসএস ফাইল তৈরি করবেন কিনা আরও ভাল।
বুটস্ট্র্যাপের সিএসএস ফাইলটি পরিবর্তন করবেন না কারণ এটি একবার আপনার পৃষ্ঠার অন্যান্য অংশে ব্যবহার করার পরে এটি আপনার বুটস্ট্র্যাপের সমস্ত কিছুকে পরিবর্তন করে দেবে।
যদি আপনার পৃষ্ঠাটি কিছুটা দীর্ঘ হয় তবে এটি স্বয়ংক্রিয়ভাবে একটি স্ক্রোল বার সরবরাহ করবে। এবং যখন মডেলটি খুলবে, এটি স্ক্রোল বারটি আড়াল করবে কারণ বুটস্ট্র্যাপই এটি ডিফল্ট হিসাবে করে।
মডেলটি খোলার সময় এটিকে আড়াল করা এড়াতে কেবল নিজের সিএসএস ফাইলে সিএসএস কোড (নীচে) রেখে এটি ওভাররাইড করুন।
.modal-open {
overflow: scroll;
}
ঠিক তদ্বিপরীত ...
.modal-open {
overflow: hidden;
}
অতিরিক্ত হিসাবে, যদি মডেল পপআপটির ভিতরে থাকা সামগ্রীর সাথে স্ক্রোল করতে হয় এবং পিতামাতার এখনও স্থির থাকতে হয় তবে নিম্নলিখিতটি আপনার কাস্টম সিএসএসে যুক্ত করুন (ওভাররাইডিং সিএসএস)
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
.modal-open {
overflow: hidden;
overflow-y: scroll;
padding-right: 0 !important;
}
বুটস্ট্র্যাপ মডেলটি একবার খোলার সাথে সাথে একটি প্যাডিং যুক্ত করে যাতে আপনি এই কোডটি নিজের সিএসএসে চেষ্টা করতে পারেন
.modal-open {
padding: 0 !important;
}
এটি সম্ভবত 1st ম মডেল (যখন বন্ধ হবে) শরীরের উপাদান থেকে মডেল-ওপেন শ্রেণিকে সরিয়ে দেয় এবং দ্বিতীয়টি যখন মোডাল-ওপেনটি চালায় তখন এটি আবার যুক্ত করবে না।
এই ক্ষেত্রে আমি মডেলটি পুরোপুরি বন্ধ / লুকানো হয়েছে কিনা তা পরীক্ষা করে অন্যটি খুলতে ইভেন্টটি ব্যবহার করব
let modal1 = $('.modal1);
let modal2 = $('.modal2);
$modal1.on('hidden.bs.modal', function (e) {
$modal2.modal('show');
});
দেহ থেকে মোডাল-ওপেনটি সরানো হয়েছে এবং খোলার সময় এটি পুনরায় যুক্ত করা হয়েছে তা নিশ্চিত করতে এটি 1 ম মডেল বন্ধ না হওয়া অবধি অপেক্ষা করবে।
আমি নিজেই এই সমস্যাটি পেয়েছি এবং এই প্রশ্নটি খুঁজে পেয়ে আমাকে বুঝতে সাহায্য করে যে আচরণের কারণ কী ছিল। সূতরাং ধন্যবাদ.
যাইহোক, আমি এই সিএসএস ওয়ার্কারআউন্ডগুলি কিছুটা অনুপযুক্ত মনে করি। যদি না হয়, তবে আপনি বিশেষত স্ক্রোলবারগুলি রাখতে চান (যদিও আমি এর কারণ হিসাবে ভাবতে পারি না)।
মূলত বুটস্ট্র্যাপ স্ক্রোলবারটি সরিয়ে দেওয়ার জন্য ক্ষতিপূরণ দেওয়ার জন্য নির্দিষ্ট উপাদানগুলিতে প্যাডিং-রাইট প্রয়োগ করছে।
অতএব, আপনাকে যা করতে হবে তা হ'ল আপনার সমস্যাযুক্ত উপাদানটির চারপাশে শূন্য প্যাডিং সহ একটি অতিরিক্ত মোড়ক স্থাপন (এবং এটি যে শ্রেণীর দিকে লক্ষ্য করা হচ্ছে তা সরিয়ে নেওয়া)।
অর্থাৎ এ থেকে পরিবর্তন ...
<div class="fixed-top p-1 bg-dark">
...this content will move as padding will be modified...
</div>
... এই ...
<div class="fixed-top p-0 bg-dark">
<div class="p-1">
...this content won't move...
</div>
</div>
আমার পক্ষে কাজ করা একমাত্র উত্তরটি হ'ল:
.modal-open {
padding-right: 0 !important;
}
html {
overflow-y: scroll !important;
}