यहाँ मेरा समाधान है जो मैंने अनुप्रयोगों में उपयोग किया है।
मैंने बॉडी ओवरफ्लो को निष्क्रिय कर दिया और कंटेनर डिव के अंदर पूरी वेबसाइट html को रखा। वेबसाइट कंटेनरों में अतिप्रवाह होता है और इसलिए उपयोगकर्ता पृष्ठ को अपेक्षित रूप से स्क्रॉल कर सकता है।
फिर मैंने एक उच्च z-सूचकांक के साथ एक सिबलिंग डिव (#Prevent) बनाया जो पूरी वेबसाइट को कवर करता है। चूंकि #Prevent में एक उच्च z- इंडेक्स है, इसलिए यह वेबसाइट कंटेनर को ओवरलैप करता है। जब #Prevent दिखाई दे रहा है तो माउस अब वेबसाइट कंटेनरों पर मंडरा रहा है, इसलिए स्क्रॉल करना संभव नहीं है।
आप मार्कअप में #Prevent से अधिक z- इंडेक्स के साथ, निश्चित रूप से एक और div रख सकते हैं, जैसे कि आपका मोडल। यह आपको पॉप-अप विंडो बनाने की अनुमति देता है जो स्क्रॉलिंग समस्याओं से ग्रस्त नहीं हैं।
यह समाधान बेहतर है क्योंकि यह स्क्रॉलबार (कूद प्रभावित) को छिपाता नहीं है। इसे इवेंट श्रोताओं की आवश्यकता नहीं है और इसे लागू करना आसान है। यह सभी ब्राउज़रों में काम करता है, हालांकि IE7 और 8 के साथ आपको चारों ओर खेलना होगा (आपके विशिष्ट कोड पर निर्भर करता है)।
एचटीएमएल
<body>
<div id="YourModal" style="display:none;"></div>
<div id="Prevent" style="display:none;"></div>
<div id="WebsiteContainer">
<div id="Website">
website goes here...
</div>
</div>
</body>
सीएसएस
body { overflow: hidden; }
#YourModal {
z-index:200;
/* modal styles here */
}
#Prevent {
z-index:100;
position:absolute;
left:0px;
height:100%;
width:100%;
background:transparent;
}
#WebsiteContainer {
z-index:50;
overflow:auto;
position: absolute;
height:100%;
width:100%;
}
#Website {
position:relative;
}
jQuery / js
function PreventScroll(A) {
switch (A) {
case 'on': $('#Prevent').show(); break;
case 'off': $('#Prevent').hide(); break;
}
}
स्क्रॉल को अक्षम / सक्षम करें
PreventScroll('on'); // prevent scrolling
PreventScroll('off'); // allow scrolling