मोडल डायलॉग स्क्रीन से अधिक लंबा होने पर पेज को स्क्रॉल कैसे करें?

Question 1

मेरे पास अपने ऐप में एक मोडल डायलॉग है जो y दिशा में काफी लंबा हो सकता है। यह एक समस्या का परिचय देता है जिससे संवाद की कुछ सामग्री पृष्ठ के नीचे छिपी रहती है।

यहाँ छवि विवरण दर्ज करें

मैं विंडो स्क्रॉलबार को संवाद स्क्रॉल करने के लिए चाहूंगा जब यह प्रदर्शित हो और स्क्रीन पर फिट होने के लिए बहुत लंबा हो लेकिन मुख्य शरीर को मोडल के पीछे छोड़ दें। यदि आप ट्रेलो का उपयोग करते हैं तो आप जानते हैं कि मैं क्या करने जा रहा हूं।

क्या स्क्रॉलबार को नियंत्रित करने के लिए जावास्क्रिप्ट का उपयोग किए बिना यह संभव है?

यहाँ सीएसएस है जिसे मैंने अब तक अपने मोडल और डायलॉग पर लागू किया है:

body.blocked {
  overflow: hidden;
}

.modal-screen {
  background: #717174;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 50;
}

.dialog {
  background: #fff;
  position: fixed;
  padding: 12px;
  top: 20%;
  left: 50%;
  z-index: 10000;
  border-radius: 5px;
  box-shadow: 0, 0, 8px, #111;
}

Question 2

महज प्रयोग करें

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

यह आपके मोडल को व्यवस्थित करेगा और फिर इसे एक वर्टिकल स्क्रॉल देगा

Question 3

यह वही है जो मेरे लिए तय है:

max-height: 100%;
overflow-y: auto;

संपादित करें : मैं अब ट्विटर पर वर्तमान में उपयोग की जाने वाली उसी पद्धति का उपयोग करता हूं जहां मोडल वर्तमान सामग्री के शीर्ष पर एक अलग पृष्ठ की तरह काम करता है और मोडल के पीछे की सामग्री आपके स्क्रॉल करने पर नहीं चलती है।

संक्षेप में यह है:

var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
  marginRight: scrollBarWidth,
  overflow: 'hidden'
});
$modal.show();

इस सीएसएस के साथ मोडल पर:

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;

JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
शुद्ध JS संस्करण (IE9 +): https://jsfiddle.net/0x0049/koodkcng/1/

यह पृष्ठ या मोडल संवाद की ऊँचाई या चौड़ाई पर कोई फर्क नहीं पड़ता है, जहां आपके माउस / उंगली है, कोई बात नहीं स्क्रॉल करने की अनुमति देता है, घबराना कूद नहीं है कुछ समाधान हैं जो मुख्य सामग्री पर स्क्रॉल को अक्षम करते हैं, और बहुत अच्छा भी लगता है।

Question 4

परिवर्तन position

position:fixed;
overflow: hidden;

सेवा

position:absolute;
overflow:scroll;

Question 5

यहाँ मोडल विंडो का मेरा डेमो है जो अपनी सामग्री को ऑटो-आकार देता है और खिड़की में फिट नहीं होने पर स्क्रॉल करना शुरू करता है।

मोडल विंडो डेमो (HTML स्रोत कोड में टिप्पणियां देखें)

सभी को केवल HTML और CSS के साथ किया गया - मोडल विंडो को प्रदर्शित करने और आकार बदलने के लिए कोई JS की आवश्यकता नहीं है ~~(लेकिन आपको अभी भी पाठ्यक्रम की विंडो को प्रदर्शित करने की आवश्यकता है~~ - नए संस्करण में आपको JS की बिल्कुल भी आवश्यकता नहीं है)।

अद्यतन (अधिक डेमो):

बिंदु बाहरी और आंतरिक DIV है जहाँ बाहरी व्यक्ति निश्चित स्थिति को परिभाषित करता है और आंतरिक स्क्रॉल बनाता है। (डेमो में वास्तव में अधिक DIVs हैं जो उन्हें वास्तविक मोडल विंडो की तरह बनाते हैं।)

        #modal {
            position: fixed;
            transform: translate(0,0);
            width: auto; left: 0; right: 0;
            height: auto; top: 0; bottom: 0;
            z-index: 990; /* display above everything else */
            padding: 20px; /* create padding for inner window - page under modal window will be still visible */
        }

        #modal .outer {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 999;
        }

        #modal .inner {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: auto;       /* allow to fit content (if smaller)... */
            max-height: 100%;   /* ... but make sure it does not overflow browser window */

            /* allow vertical scrolling if required */
            overflow-x: hidden;
            overflow-y: auto;

            /* definition of modal window layout */
            background: #ffffff;
            border: 2px solid #222222;
            border-radius: 16px; /* some nice (modern) round corners */
            padding: 16px;       /* make sure inner elements does not overflow round corners */
        }

Question 6

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

<html>
        <body>
        <!-- Put all your page layouts and elements


        <!-- Let the last element be the modal elemment  -->
        <div id="myModals">
        ...
        </div>

        </body>
</html>

Question 7

यहाँ .. मेरे लिए पूरी तरह से काम करता है

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

Question 8

इस सीएसएस को जोड़कर आप इसे सरल तरीके से कर सकते हैं, इसलिए आपने इसे CSS में जोड़ा है:

.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}

और यह काम कर रहा है!

Question 9

position:fixedतात्पर्य यह है कि, अच्छी तरह से, मोडल विंडो दृष्टिकोण के सापेक्ष स्थिर रहेगी। मैं आपके आकलन से सहमत हूं कि इस परिदृश्य में यह उचित है, इस बात को ध्यान में रखते हुए कि आप स्वयं मोडल विंडो में स्क्रॉलबार क्यों नहीं जोड़ते?

यदि ऐसा है, तो सही max-heightऔर overflowगुणों को करना चाहिए।

Question 10

अंत में मुझे यह सुनिश्चित करने के लिए मोडल स्क्रीन के पीछे पृष्ठ की सामग्री में परिवर्तन करना पड़ा कि यह पृष्ठ को स्क्रॉल करने के लिए कभी भी पर्याप्त समय नहीं मिला।

एक बार जब मैंने ऐसा किया, तो position: absoluteसंवाद के लिए आवेदन करते समय मुझे जो समस्याएँ हुईं, उनका समाधान किया गया क्योंकि उपयोगकर्ता अब पृष्ठ को नीचे नहीं स्क्रॉल कर सकता है।

Question 11

मोडल खुला होने पर विंडो पेज स्क्रॉलबार क्लिक करने योग्य है

यह मेरे लिए काम करता है। शुद्ध सीएसएस।

<style type="text/css">

body.modal-open {
padding-right: 17px !important;
}

.modal-backdrop.in {
margin-right: 16px; 

</style>

कोशिश करो और मुझे बताओ

Question 12

मैं डायनामिक्स की इस समस्या के लिए अपने शुद्ध CSS उत्तर को डायनामिक चौड़ाई और ऊंचाई के साथ जोड़ना चाहता था। निम्नलिखित आवश्यकताओं के साथ निम्नलिखित कोड भी काम करता है:

स्क्रीन के केंद्र में मोडल रखें
यदि व्यूपोर्ट की तुलना में मोडल अधिक है, तो dimmer स्क्रॉल करें (मोडल सामग्री नहीं)

HTML:

<div class="modal">
    <div class="modal__content">
        (Long) Content
    </div>
</div>

सीएसएस / कम:

.modal {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: @qquad;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.7);
    z-index: @zindex-modal;

    &__content {
        width: 900px;
        margin: auto;
        max-width: 90%;
        padding: @quad;
        background: white;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
    }
}

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