jQuery यूआई संवाद - संवाद के अंदर स्क्रॉल करते समय बाहरी विंडो स्क्रॉल

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

मैंने निम्नलिखित कोड का उपयोग करके एक मॉडल संवाद बनाया है।

// Dialog 
$('#dialog').dialog({ 
    autoOpen: false, 
    width: 800, 
    height: 550, 
    minHeight: 500, 
    maxHeight: 800, 
    minWidth: 500, 
    maxWidth: 900, 
    modal: true, 
    buttons: { 
     "Cancel": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

$('#AddNewItems').click(function() { 
    var currentURL = getURLOfCurrentPage(); 
    $('#dialog').dialog('open'); 
    $("#dialog").dialog("option", "width", 800); 
    $("#dialog").dialog("option", "height", 550); 
    $("#dialog").dialog("option", "draggable", false); 
    $("#dialog").dialog("option", "modal", true); 
    $("#dialog").dialog("option", "resizable", false); 
    $('#dialog').dialog("option", "title", 'My Title'); 
    $("#modalIframeId").attr("src", "http://myUrl"); 
    return false; 
});

स्रोत

2010-08-03 NLV

यह मैं क्या उपयोग है:

$('#dialog').dialog({ 
    autoOpen: false, 
    width: 800, 
    height: 550, 
    minHeight: 500, 
    maxHeight: 800, 
    minWidth: 500, 
    maxWidth: 900, 
    modal: true, 
    buttons: { 
     "Cancel": function() { 
      $(this).dialog("close"); 
     } 
    }, 
    open: function(){ 
     $("body").css("overflow", "hidden"); 
    }, 
    close: function(){ 
     $("body").css("overflow", "auto"); 
    } 
});

स्रोत

2010-09-16 16:17:59 gurun8

हाँ। यह काम। यह वास्तव में वही है जो मैंने किया है। – NLV

क्या एक अच्छा विचार है। इस तरह के शरीर के अतिप्रवाह को छिपाने के लिए कभी सोचा नहीं। बहुत बढ़िया! –

बस शानदार –

कुछ इस तरह काम कर सकते हैं (इस अपरीक्षित है):

<script type="text/javascript" language="Javascript"> 
    var stop_scroll = false; 
    function scrolltop(){ 
     if(stop_scroll == true){ 
      scroll(0,0); 
      // Or window.scrollTo(0,0); 
     } 
    } 
</script>

आपके शरीर टैग में (<body></body>)

<body onscroll="scrolltop();" >

अंतिम, सही पर stop_scroll सेट जब आप बातचीत खोलने और जब आप इसे बंद करते हैं तो झूठा।

स्रोत

2010-08-03 15:40:44

धन्यवाद में इस परीक्षण किया गया। मुझे इसे आज़माएं। – NLV

धन्यवाद। यह बहुत अच्छा काम कर रहा है। लेकिन स्क्रॉल (0,0) एक अजीब और झटकेदार व्यवहार दे रहा है। क्या मैं रोकथाम() को कुछ नहीं कह सकता और घटना रद्द कर सकता हूं? – NLV

मुझे नहीं लगता कि आप कर सकते हैं (अगर मैं गलत हूं तो कोई मुझे सही कर सकता है)। मेरा मानना है कि घटना केवल तभी बुलाई जाती है जब स्क्रॉल शुरू हो जाता है, ऐसा होने से पहले नहीं। यही कारण है कि हम स्क्रॉल स्थिति को वापस ले जा रहे हैं (0,0)। हमारे कार्यक्रम में प्रवेश करने से पहले यह पहले ही स्थानांतरित हो गया है। खुशी है कि आप इसे उपयोगी पाया हालांकि। –

gurun8 के समाधान मेरे लिए सबसे अच्छा काम किया। हालांकि, मुझे वैश्विक स्तर पर ऐसा करने का एक तरीका चाहिए। मेरा एप्लिकेशन एकाधिक पृष्ठों पर संवाद का उपयोग कर रहा है, और मैं सभी उदाहरणों को अपडेट नहीं करना चाहता था।

निम्नलिखित कोड खोलने और सभी संवादों के समापन संभाल लेंगे:

$('body').on('dialogopen', '.ui-dialog-content', function() { 
    var $dialog = $(this); 
    var $body = $('body'); 
    var height = $body.height(); 

    // Hide the main scrollbar while the dialog is visible. This will prevent the main window 
    // from scrolling if the user reaches the end of the dialog's scrollbar. 
    $body.css('overflow', 'hidden'); 

    // Calling resize on the dialog so that the overlay is resized for the scrollbars that are now hidden. 
    $dialog.resize().on('dialogclose', function() { 
     // Show the main scrollbars and unbind the close event handler, as if the 
     // dialog is shown again, we don't want the handler to fire multiple times. 
     $body.css('overflow', 'auto'); 
     $dialog.off('dialogclose'); 
    }); 
});

मैं jQuery v1.8.23 उपयोग कर रहा हूँ। मैं इंटरनेट एक्सप्लोरर 8, इंटरनेट एक्सप्लोरर 9, फ़ायरफ़ॉक्स 17 और क्रोम 19.

स्रोत

2013-01-10 11:25:10

मैं इसे कुछ संशोधनों के साथ उपयोग करता हूं। सबसे पहले, मैं शरीर के 'पैडिंग-दाएं' को पकड़ता हूं और इसे स्क्रॉलबार की चौड़ाई पर सेट करता हूं (छिपाने के लिए अतिप्रवाह बदलने के ठीक बाद)। यह पृष्ठ को पृष्ठभूमि में स्थानांतरित करने से रोकता है, जो विचलित है। संवाद बंद होने पर मैं 'पैडिंग-दाएं' वापस कर देता हूं। दूसरा, कुछ भी करने से पहले मैं परीक्षण करता हूं कि क्या शरीर का 'ओवरफ़्लो' पहले से ही' छुपा हुआ है ', और यदि ऐसा है तो मैं कुछ भी नहीं करता हूं। यह तब हो सकता है जब दो संवाद एक बार में खोले जाएंगे। –

jQuery यूआई संवाद - संवाद के अंदर स्क्रॉल करते समय बाहरी विंडो स्क्रॉल

उत्तर

संबंधित मुद्दे