मोडल निश्चित स्थिति सामग्री पारी

Question

अनुसंधान के एक बहुत बाद, मैं के लिए unable to find a proper solution हूँ तय तैनात तत्वों, कवर छवियों, और मानक सामग्री की सही, जब मोडल विंडो खुला है के लिए स्थानांतरण।

नोट: मैं एक सामान्य, स्वच्छ समाधान है, न कि हार्डकोडेड ठीक है कि सिर्फ एक विशिष्ट लेआउट पर काम करेगा के लिए देख रहा हूँ।

क्या कोई इस मुद्दे को ठीक करने का तरीका जानता है? कृपया इस उदाहरण देखें: http://codepen.io/microcipcip/pen/kXdRWK

body { 
    height: 2500px; 
    &.-modal-open { 
     overflow: hidden; 
    } 
} 
.fixed { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 20px 0; 
    background: #FF0000; 
} 
.modal { 
    overflow-x: hidden; 
    overflow-y: scroll; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: rgba(0, 0, 0, 0.4); 
    opacity: 0; 
    transition: opacity .2s ease-in-out; 
    body.-modal-open & { 
     opacity: 1; 
    } 
} 

Answer 1

समाधान बहुत ही सरल और एक शुद्ध सीएसएस ठीक है। आपको अपनी सामग्री के लिए मार्जिन का कभी भी उपयोग नहीं करना चाहिए, बल्कि इसे कंटेनर में लपेटना चाहिए और इसके बजाय पैडिंग का उपयोग करना चाहिए।

स्क्रॉलबार की चौड़ाई हमेशा 17px नहीं है ... 17px फ़ायरफ़ॉक्स के लिए है, लेकिन क्रोम के लिए 15px है, कभी-कभी IE के पास कोड के आधार पर स्क्रॉलबार चौड़ाई भी नहीं होती है। http://codepen.io/scooterlord/pen/KgKLwB

संपादित करें:

यहाँ अद्यतन कलम है कहने के लिए, कि यह एक क्रॉस-ब्राउज़र समाधान है और दोषरहित हर जगह मैं इसे परीक्षण किया काम करता है भूल गया। यदि ब्राउज़र मोबाइल है, तो अतिरिक्त स्क्रॉलबार के अतिरिक्त/हटाने से और चौड़ाई का कोई भी परिवर्तन होता है और ब्राउज़र के आधार पर सामग्री/निश्चित तत्वों के लिए नव निर्मित स्क्रॉलबार हमेशा प्रारंभिक बॉडी स्क्रॉलबार के समान होते हैं।

Answer 2

कैसे शरीर के लिए हर बार एक मॉडल खोला है 17px सही मार्जिन जोड़ने के बारे में। वह उस स्थान को अनुकरण करेगा जो स्क्रॉल बार के लिए आरक्षित था। (17px मानक ब्राउज़र चौड़ाई की चौड़ाई है)

body.-modal-open { 
    margin-right: 17px; 
} 

इस बीच, के लिए निश्चित तत्व के लिए आप चौड़ाई पुनर्गणना;

.-modal-open .fixed { 
    width: calc(100% - 17px); 
} 

अभी भी एक समस्या यह है, सीएसएस पृष्ठभूमि छवि अभी भी स्थानांतरित कर दिया है, समाधान केवल शरीर के बजाय एक div कंटेनर में रखने से है।

Answer 3

मुख्य चाल शरीर को आपकी सामग्री रैपर के रूप में उपयोग नहीं करना है। एक समर्पित div का उपयोग रैपर के रूप में करें और अपने मॉडलों को बाहर रखें ताकि स्क्रॉलबार एक दूसरे के साथ हस्तक्षेप न करें।

.-modal-open .fixed, 
.-modal-open .content { 
    overflow-y:scroll; 
} 

..however, यह जरूरी है कि आपकी सामग्री को अलग ढंग से स्टाइल है:

var $btnShow = document.querySelector('.show'); 
 
var $btnHide = document.querySelector('.hide'); 
 
var $body = document.querySelector('.modal'); 
 
$btnShow.addEventListener('click', function() { 
 
    $body.classList.toggle('-modal-open') 
 
}); 
 
$btnHide.addEventListener('click', function() { 
 
    $body.classList.toggle('-modal-open') 
 
});

.wrapper { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    bottom:0; 
 
    right:0; 
 
    overflow: auto; 
 
} 
 
.content { 
 
    background: url('https://www.dropbox.com/s/m16kxhb2jg5jwwh/bear-800x450.jpg?dl=0&raw=1'); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    height: 2500px; 
 
    width: 100%; 
 
} 
 

 
.clickme { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    padding: 10px; 
 
    border: none; 
 
    background: #000000; 
 
    color: #ffffff; 
 
    text-transform: uppercase; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.clickme:hover { 
 
    background: grey; 
 
    cursor:pointer 
 
} 
 

 
.modal { 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    display: none; 
 
    transition: opacity .2s ease-in-out; 
 
    z-index: 3; 
 
} 
 
.modal.-modal-open { 
 
    display:block; 
 
} 
 
.modal-content { 
 
    min-height: 1500px; 
 
    margin: 100px; 
 
    background: url('https://www.dropbox.com/s/u520y7yo711uaxi/poster2.jpg?dl=0&raw=1'); 
 
    background-size: cover; 
 
}

<div class="modal"> 
 
    <div class="modal-content">Content 
 
    <button class="clickme hide">Toggle Modal HIDE!</button> 
 
    </div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="content"> 
 
<button class="clickme show">Toggle Modal SHOW!</button> 
 
    </div> 
 
</div>