मैं मोडल पॉपअप को अपनी सामग्री को पृष्ठ के साथ कैसे स्क्रॉल कर सकता हूं?

Question

मुझे एक मॉडल पॉपअप मिला है और जब यह ब्राउज़र की ऊंचाई से अधिक लंबी सामग्री को लोड करता है तो मैं बाकी जानकारी देखने के लिए नीचे स्क्रॉल करने में असमर्थ हूं। इसके बजाय पृष्ठभूमि स्क्रॉल कर सकती है लेकिन पॉपअप नहीं होगा।

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

Answer 1

कंटेनर ब्लॉक पर शैली overflow: auto रखो।

Answer 2

अपने मोडल पॉपअप के सीएसएस में, मोडलपॉप अप की चौड़ाई सेट करें, फिर overflow:auto सेट करें। यह आपको क्षैतिज स्क्रॉलबार देगा। उदाहरण:

.ModalPopupPanel 
{ 
    width:900px; 
    overflow:auto; 
} 

तो, जब सामग्री चौड़ाई 900px से अधिक हो, तो क्षैतिज स्क्रॉलबार दिखाई देगा। वर्टिकल स्क्रॉलबार के लिए भी यही सच है जहां आपको मोडलपॉप की ऊंचाई सेट करने की आवश्यकता है।

Answer 3

इस स्क्रिप्ट ने पॉपअप ऊंचाई को स्क्रीन ऊंचाई के 90% तक सेट किया है, तो आप ओवरफ़्लो सेट कर सकते हैं: auto;

<script type="text/javascript"> 
    function pageLoad() { 
     $get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px"; 
    } 
    </script> 

यहां एक संबंधित प्रश्न है जिसे मैं पूछता हूं और मुझे मिला समाधान।

asp.net ModalPopupExtender : need to show scroll bar when overflow

Answer 4

आप जब पॉपअप स्क्रॉलबार को छिपाने के लिए खुला है शरीर टैग के लिए एक वर्ग में जोड़ सकते हैं, और उन्हें हटा पॉपअप चली जाती है, तो अपने पृष्ठभूमि स्थिति होना चाहिए: तय की और ऊंचाई होना चाहिए window.height() (इसे जेएस के साथ गतिशील रूप से प्राप्त करें), और अतिप्रवाह भी हो: ऑटो।

यह सब कुछ के साथ क्या होता है, यदि पॉपअप पृष्ठभूमि से लंबा है, तो आपको दाईं ओर एक अच्छी स्क्रॉल बार मिलती है, और क्योंकि आपका बॉडी स्क्रॉल बार छुपा हुआ है, तो आप केवल यही देखते हैं। साथ ही, पृष्ठ स्वयं स्क्रॉल नहीं करता है। फेसबुक ने अपने चित्र दर्शक के साथ ऐसा किया है।

Answer 5

आप अपने contens साथ स्क्रॉल modalpopup के लिए यह कोशिश कर सकते हैं: सेट PopupDragHandleControlID एक खाली पैनल के लिए यह इशारा करते हुए, सेट का स्थान बदलने मोड = "कोई नहीं" इस मॉडल एक ही स्थिति में तय हो गई के रूप में आप पृष्ठ को स्क्रॉल रखेंगे।

Answer 6

यहाँ सरल और सबसे अच्छा काम कर समाधान

अपने मोडल पॉपअप पृष्ठ पर उस वर्ग जोड़ें।

body.modal-open { 
 
overflow: auto; 
 
}