बहुत सारे मोडल विंडो प्लगइन्स पाए गए, सरल मॉड्यूल, लाइटबॉक्स जैसे कुछ के लिए विभिन्न कॉन्फ़िगरेशन विकल्पों का प्रयास किया ... ये हल्के वजन वाले हैं और लचीली कॉन्फ़िगरेशन हैं, लेकिन मुझे एक चीज़ याद आ रही है: मुझे स्क्रॉल मोडल विंडो (जब यह स्क्रॉल करने में सक्षम होना चाहिए) ऊंचाई से अधिक) ब्राउज़र स्क्रॉलबार के साथ फेसबुक गैलरी मोडल, या pinterest.com पिन पूर्वावलोकन मोडल, कोई सुझाव?jQuery "स्क्रॉल करने योग्य" मोडल विंडो प्लगइन कहां खोजें?
$(window).scroll(function(){
if($('#ux-dialog-test-container').dialog('isOpen') === true){
var dialogHeight = $('.ui-dialog').height();
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var scrollLength = documentHeight - windowHeight;
var currentScrollTop = $(window).scrollTop();
var scrollPercentage = currentScrollTop/scrollLength;
var pixelsToSubtract = dialogHeight * scrollPercentage;
var newTop = 32 - pixelsToSubtract;
$('.ui-dialog').animate({top: newTop + 'px'}, 15, 'swing');
}
});
मैं इस एक पुराने सवाल पता है, लेकिन मैं एक ही मुद्दे के साथ संघर्ष कर रहा था और इस एक उपयुक्त समाधान मिल गया। यह मूल रूप से मोडल संवाद को स्क्रॉल करने का भ्रम देता है, जब वास्तव में यह नीचे स्क्रॉल करते समय शीर्ष पर दबाव डाल रहा है। मैंने खिड़की के स्क्रॉल के प्रतिशत की गणना की और "शीर्ष:" सीएसएस संपत्ति को समायोजित करने के लिए उस प्रतिशत का उपयोग किया। मेरे मामले में मेरा शीर्ष सेट 32px था, जैसा कि आप देख सकते हैं कि मैंने अपनी गणनाओं में समायोजित किया है। उम्मीद है कि यह किसी और को मदद करता है!
ओएच! और इस जो मैं एक और धागा से चुरा लिया कुछ ब्राउज़र में की जरूरत है स्क्रॉल अनलॉक करने के लिए (यानी क्रोम में स्क्रॉलबार के लिए क्लिक करें घटना दबा दिया जाता है, तो मोडल: सच)
if ($.ui && $.ui.dialog) {
$.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' ');
}
मैं इस रूप में अच्छी तरह IE8 + में काम करता है के रूप में जानते क्रोम और एफएफ।
संपादित करें: यह देखने के लिए जांच जोड़ा गया कि क्या संवाद खुला था या नहीं।
नहीं, यह वही नहीं है जो मैं ढूंढ रहा हूं .. मुझे ब्राउजर वर्टिकल स्क्रॉलबार के साथ स्क्रॉल मोडल विंडो को सक्षम करने की आवश्यकता है, इस मोडल विंडो के अंदर स्क्रॉल करने योग्य सामग्री नहीं है। –