ओवरले के बिना JQuery मॉडल संवाद

मैं एक "AJAX लोडर संवाद" दिखाने की कोशिश कर रहा हूं जो इंटरफ़ेस (मोडल) को अवरुद्ध करता है लेकिन इसमें कोई ओवरले नहीं है।ओवरले के बिना JQuery मॉडल संवाद

$("<div></div>").dialog({ 
     modal: true, 
     dialogClass: "noOverlayDialog", 
     autoOpen: false, //opened later 
     ... 
    });

मैं ओवरले को छिपाने के लिए निम्नलिखित सीएसएस कहा::

.ui-dialog.noOverlayDialog + .ui-widget-overlay { opacity: 0 !important; }

हालांकि, जब मैं dialog("open") ओवरले चमक फोन तो गायब हो जाता है, जैसे कि

यह मैं कैसे संवाद प्रारंभ है मैंने इसे जावास्क्रिप्ट का उपयोग करके छुपाया था। display:none; या visibility:hidden का उपयोग कर वही प्रभाव।

यह सुनिश्चित करने के लिए कि यह सीएसएस ओवरले को हटा रहा है और कुछ और नहीं, मैंने सीएसएस की रेखा को हटा दिया और निश्चित रूप से पर्याप्त ओवरले हमेशा दिखाई दे रहा था।

ऐसा क्यों हो रहा है? मैंने सोचा कि स्थैतिक सीएसएस में इस प्रकार का व्यवहार नहीं होना चाहिए और ओवरले को फ्लैश के बिना तुरंत छुपाया जाना चाहिए।

यदि मुझे सहज ज्ञान युक्त समाधान नहीं मिल रहा है, तो शायद एक विकल्प ओवरले को एक साथ रोकने के लिए मोडल विकल्प सेट करना होगा, और फिर मोडल व्यवहार प्राप्त करने के लिए कोड लिखें। किसी भी तरह से, मुझे एक कामकाजी समाधान की ज़रूरत है।

स्रोत

2013-01-26 parliament

मुझे लगता है कि आपका सबसे अच्छा विकल्प jQueryUI स्टाइल शीट में घोषित वास्तविक सीएसएस गुणों को ओवरराइड करना हो सकता है जो ओवरले पृष्ठभूमि करता है। जब मैं ओवरराइड कहता हूं, मेरा मतलब है कि सीएसएस को स्वयं नहीं बदला जाए लेकिन अपने काम करने वाले एचटीएमएल में गुण जोड़ें और उन्हें दोबारा दोहराएं। –

क्या मैंने ऐसा नहीं किया है? बात यह है कि मुझे वैश्विक होने की आवश्यकता नहीं है, बल्कि केवल विशिष्ट संवादों पर लागू होती है जिनमें कक्षा 'नोओवरलेडियलॉग' है। यदि यह आपको सुझाव नहीं बदलता है, तो कृपया उदाहरण के साथ उत्तर दें (टिप्पणी नहीं) और मैं इसे आजमाउंगा। धन्यवाद – parliament

नहीं क्योंकि आप वास्तविक कक्षाओं को ओवरराइड करने के बजाय फिर से परिभाषित कर रहे हैं। –

मुझे लगता है कि तुम क्या देख रहे हैं ओवरले पृष्ठभूमि छवि पारदर्शिता प्रभाव (सभी ब्राउज़र में समर्थित नहीं, वैसे) में किक करने में सक्षम है से पहले कुछ समय के प्रतिपादन है।

.ui-widget-overlay { background: none !important; }

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

स्रोत

2013-01-29 14:52:53

मुझे यह jsFiddle पर काम करने के लिए मिला। Try this link

<div id="dialog"> 
    <h3>Here is the dialog content</h3> 
    <p id="dialogContent"></p> 
</div> 
<button onclick="$('#dialog').dialog('open');">open</button> 

<script> 
    $(document).ready(function(){ 
     $('#dialog').dialog({ 
      title: 'My dialog', 
      dialogClass: "noOverlayDialog", 
      autoOpen:false, 
      modal: true, 
      open: function(event,ui){ 
       $('.noOverlayDialog').next('div').css({'opacity':0.0}); 
      } 
     }); 
    }); 
</script>

स्रोत

2013-01-29 15:18:14 ShadeTreeDeveloper

यह पृष्ठ पर एक से अधिक संवाद नहीं होने पर यह काम नहीं करेगा (विशेष रूप से, '$ ('नोओवरलेडियलॉग')। अगला ('div') 'हमेशा ओवरले का चयन नहीं करेगा - केवल इस विशेष मामले में) । साथ ही, आप 'ओपन' पर 'अस्पष्टता' को '0'' पर सेट कर रहे हैं, लेकिन इसे कभी भी अपने डिफ़ॉल्ट मान पर रीसेट नहीं कर रहे हैं, इसलिए अन्य संवाद जो ** ** ** एक दृश्य ओवरले चाहते हैं, काम नहीं करेंगे। मैंने एक वैकल्पिक [उत्तर] (http://stackoverflow.com/a/14656717/520779) प्रदान किया है, लेकिन हो सकता है कि आप इन मुद्दों को अपने आप में ठीक करना चाहें। – mgibsonbr

मुझे यकीन नहीं है कि यह सच है। मेरा समाधान केवल #dialog div से जुड़े संवाद को प्रभावित करेगा। कोई अन्य संवाद उनके पास दिए गए विकल्पों के अनुसार काम करेगा। यह मेरे ऐप पर एक कामकाजी समाधान है जिसमें कुल 15 अलग-अलग संवाद हैं। – ShadeTreeDeveloper

सबसे पहले मैंने वही सोचा, लेकिन अपने बेवकूफ के साथ पोक करते हुए मैं [इस] (http://jsfiddle.net/hb8yA/6/) में भाग गया। जबकि पहला संवाद ठीक काम करता है, दूसरा ओवरले के बजाय ** ** छुपाता है ... (टिप: इसे 'Esc' कुंजी के साथ बंद करें और शेष स्क्रीन काम करता रहता है) – mgibsonbr

jQuery द्वारा प्रयोग किया जाता ओवरले वर्ग ui-widget-overlay है। तो अपने सीएसएस में नीचे सीएसएस नियम, शामिल

.ui-widget-overlay { 
    opacity: 0; 
    filter: alpha(opacity=0); /* IE8 and lower */ 
}

डेमो:http://jsfiddle.net/Lhwsq/

नोट:

यह सुनिश्चित करें कि इस नियम jQuery सीएसएस या किसी अन्य प्लगइन के बाद शामिल किया गया है सीएसएस।
यह शैली उसी पृष्ठ में किसी भी संवाद पर लागू होगी।

यह किसी भी विशिष्ट संवाद पर काम देख https://stackoverflow.com/a/14586175/297641

स्रोत

2013-01-29 16:33:40

एक विकल्प के लिए एक अतिरिक्त वर्ग overlay-hidden बनाने की जाएगी और ओवरले में जोड़ने जब संवाद opened है, इसे फिर से हटाने के जब यह closed है बनाने के लिए।यही कारण है कि पेज में अन्य संवाद (एक दृश्य ओवरले की आवश्यकता हो सकती है) सुनिश्चित ठीक से काम जारी रहेगा:

open: function(event,ui){ 
    $('.ui-widget-overlay').addClass('overlay-hidden'); 
}, 
beforeClose: function(event,ui){ 
    $('.ui-widget-overlay').removeClass('overlay-hidden'); 
}

overlay-hidden वर्ग @Vega द्वारा opacity0 करने को पार कर जाएगी suggested के रूप में,:

.overlay-hidden { 
    opacity: 0.0; 
    filter: alpha(opacity=0); /* IE8 and lower */ 
}

Working example जेएसफ़िल्ड पर (@ शेडट्री डेवलपर के answer से अनुकूलित)।

स्रोत

2013-02-01 23:18:56 mgibsonbr

नीचे दिए गए कोई भी जवाब मेरे लिए काम नहीं करता है लेकिन मुझे अंततः समाधान मिल गया।

यह पता चला संवाद शुरू में एक कंटेनर कंटेनर संवाद नहीं निम्नलिखित ओवरले के साथ .ui-effects-wrapper बुलाया अंदर प्रदान की गई है:

<div class="ui-effects-wrapper" ... > 
    <div class="ui-dialog" .... > 
    </div> 
</div> 
<div class="ui-widget-overlay" ...> </div>

इसलिए मेरी चयनकर्ता .ui-dialog.noOverlayDialog + .ui-widget-overlay केवल तभी प्रभावी होगा के बाद प्रभाव कंटेनर हटा दिया गया था। इस मुद्दे को हल करने के लिए मुझे दोनों चयनकर्ताओं को लक्षित करने की आवश्यकता है:

.ui-dialog.noOverlayDialog + .ui-widget-overlay, 
.ui-effects-wrapper + .ui-widget-overlay { 
     background: none !important; 
     opacity: 0 !important; 
}

नोट, दूसरा चयनकर्ता वैश्विक है।

स्रोत

2013-02-12 01:48:54 parliament

उत्तर

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