जब मैं अपने पृष्ठ में एक मोडल दृश्य ट्रिगर करता हूं तो यह स्क्रॉल बार को गायब करने के लिए ट्रिगर करता है। यह एक कष्टप्रद प्रभाव है क्योंकि जब मोडल चलता है तो पृष्ठभूमि पृष्ठ हिलना शुरू हो जाता है। क्या उस प्रभाव का कोई इलाज है?
जब मैं अपने पृष्ठ में एक मोडल दृश्य ट्रिगर करता हूं तो यह स्क्रॉल बार को गायब करने के लिए ट्रिगर करता है। यह एक कष्टप्रद प्रभाव है क्योंकि जब मोडल चलता है तो पृष्ठभूमि पृष्ठ हिलना शुरू हो जाता है। क्या उस प्रभाव का कोई इलाज है?
जवाबों:
यह एक विशेषता है, जब आप मोडल दिखाते हैं तो क्लास modal-openHTML में जुड़ जाती है bodyऔर जब आप इसे छिपाते हैं तो उसे हटा दिया जाता है।
यह स्क्रॉलबार गायब कर देता है क्योंकि बूटस्ट्रैप css कहता है
.modal-open {
overflow: hidden;
}आप इसे निर्दिष्ट करके ओवरराइड कर सकते हैं
.modal-open {
overflow: scroll;
}में अपनी खुद की सीएसएस।
<style></style>अंदर से शामिल कर सकता है templateUrlताकि यह ऐप में अन्य मॉडल्स पर न हो।
मुझे लगता है कि इनहेरिट स्क्रॉल से बेहतर है क्योंकि जब आप मोडल खोलते हैं, तो यह हमेशा स्क्रॉल से खुलेगा, लेकिन जब आपके पास कोई स्क्रॉल नहीं होगा तो आपको वही समस्या मिलेगी। तो मैं बस यही करता हूँ:
.modal-open {
overflow: inherit;
}ओवरफ्लो-वाई का उपयोग करना बेहतर है: बॉडी से स्क्रॉलिंग और पैडिंग को हटा दें, बूटस्ट्रैप मोडल ने पेजिंग बॉडी में पैडिंग को जोड़ा।
.modal-open {
overflow:hidden;
overflow-y:scroll;
padding-right:0 !important;
}IE ब्राउज़र संगत: IE ब्राउज़र डिफ़ॉल्ट रूप से एक ही काम कर रहा है।
भगवान का शुक्र है कि मैं इस पोस्ट पर आया! मैं अपने बालों को खींच रहा था और यह जानने की कोशिश कर रहा था कि खिड़की को बंद करते समय मेरे अपने नजदीकी लिंक का उपयोग करके अपने स्क्रॉलबार को कैसे प्राप्त किया जाए। मैंने CSS के लिए सुझावों की कोशिश की, लेकिन यह ठीक से काम नहीं कर रहा था। पढ़ने के बाद
क्लास मोडल-ओपन HTML बॉडी में तब जुड़ जाता है जब आप मोडल दिखाते हैं, और जब आप इसे छिपाते हैं तो उसे हटा दिया जाता है। - @ अनुप
मैं 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;
}इसके अतिरिक्त, यदि मोडल पॉपअप को सामग्री के साथ स्क्रॉल करने की आवश्यकता है और माता-पिता को अभी भी बने रहने की आवश्यकता है, तो अपने Custom.css (ओवरराइडिंग सीएसएस) में निम्नलिखित जोड़ें।
.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;
}यह शायद इसलिए होता है कि 1 मोडल (जब बंद होता है) बॉडी एलिमेंट से मोडल-ओपन क्लास को हटाता है और दूसरा वॉन्टल-ओपन को ट्रिगर करते समय इसे वापस जोड़ देता है।
इस मामले में, मैं यह जांचने के लिए घटना का उपयोग करूंगा कि क्या मोडल बंद / छिपा हुआ है और पूरी तरह से खुला है
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;
}