jQuery: मोडल डायलॉग ओवरले रंग सेट करें

Question

मैं jquery ui का उपयोग करके एक मोडल डायलॉग पॉप करना चाहता हूं जहां ओवरले पूरी तरह से काला है। मुझे पता है कि मैं इसे थीम में सेट कर सकता हूं, लेकिन मैं नहीं चाहता कि सभी संवादों में ब्लैक ओवरले हो। उनमें से सिर्फ एक।

क्या प्रति-संवाद आधार पर एक संवाद की पृष्ठभूमि (ओवरले) रंग को कॉन्फ़िगर करने का कोई तरीका है? शायद जब यह बनाया गया है?

$("#yourDialog").dialog("widget") 
       .next(".ui-widget-overlay") 
       .css("background", "#f00ba2"); 

:

TIA

Answer 1

फ्रेडेरिक का जवाब बहुत करीब था, लेकिन यह मुझे एक समस्या के साथ छोड़ दिया: मैं उस पृष्ठ पर एक से अधिक संवाद था, और बाद मैं एक संवाद के लिए ओवरले बदल गया है, यह जब तक पेज को पुनः लोड नहीं किया गया तब तक उन सभी को बदल दिया। हालांकि, यह मुझे एक विचार दिया था;

सबसे पहले मैंने डिफ़ॉल्ट मानों को चर (पृष्ठ स्कोप) में संग्रहीत किया, और फिर मेरी कस्टम शैली सेट की।

var overlay = $(".ui-widget-overlay"); 
baseBackground = overlay.css("background"); 
baseOpacity = overlay.css("opacity"); 
overlay.css("background", "#000").css("opacity", "1"); 

फिर जब संवाद बंद हो जाता है, तो मैंने उन मानों को पुनर्स्थापित किया।

$(".ui-widget-overlay").css("background", baseBackground).css("opacity", baseOpacity); 

उन्हें चर में संग्रहीत (के रूप में उन्हें स्पष्ट मान को रीसेट करने के खिलाफ) के लिए मुख्य कारण रख-रखाव के लिए है। इस तरह, भले ही साइट.css बदल जाए, यह काम करेगा।

आपकी मदद के लिए धन्यवाद!

Answer 2

ओवरले तत्व संवाद विजेट इसके बारे में तुरंत भाई ताकि आप इसे से मेल खाते हैं और एक प्रति-संवाद के आधार पर पृष्ठभूमि रंग संशोधित कर सकते हैं और ui-widget-overlay वर्ग को उजागर करता है, आप परिणाम this fiddle में देख सकते हैं।

Answer 3

JQuery संवाद की पृष्ठभूमि एक div है जिसमें वर्ग "ui-widget-overlay" है। जिन कुंजी शैलियों को आप समायोजित करना चाहते हैं वह "अस्पष्टता", "फ़िल्टर" और "पृष्ठभूमि-रंग" ("अस्पष्टता" और "फ़िल्टर" विभिन्न ब्राउज़रों के लिए अस्पष्टता सेट करने के दो अलग-अलग तरीके हैं।) आप या तो कक्षा परिभाषा को समायोजित कर सकते हैं या संवाद परिभाषा निम्न कार्य करें:

$("div#MyDialog").dialog({ 
    title: "My Dialog Title", 
    open: function (event, ui) { 
     $(".ui-widget-overlay").css({ 
      opacity: 1.0, 
      filter: "Alpha(Opacity=100)", 
      backgroundColor: "black" 
     }); 
    }, 
    modal: true 
}); 

Answer 4

पृष्ठभूमि बदलें:

$(".ui-widget-overlay").css({background: "#000", opacity: 0.9}); 

सीएसएस मूल्यों के लिए पृष्ठभूमि पुनर्स्थापित करें:

$(".ui-widget-overlay").css({background: '', opacity: ''}); 

Answer 5

आप खुला और पास ui-संवाद की घटनाओं का उपयोग कर सकते हैं।

$("#your-dialog").dialog(
{ 
    autoOpen: false, 
    modal: true, 
    open: function() { 
     $('.ui-widget-overlay').addClass('custom-overlay'); 
    }   
}); 

और सीएसएस में आवश्यक स्टाइल जोड़ें। उदाहरण:

.ui-widget-overlay.custom-overlay 
{ 
    background-color: black; 
    background-image: none; 
    opacity: 0.9; 
    z-index: 1040;  
} 

[jQuery के यूआई संवाद में गहरा पृष्ठभूमि] की