jQuery यूआई संवाद ओवरले

Question

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

विभिन्न संवादों के लिए अलग-अलग पृष्ठभूमि रंग कैसे सेट करें?

Answer 1

बस निम्न की तरह एक शैली बनाएं और उन संवादों पर dialogClass विकल्प का उपयोग करें, जिन्हें आप एक पारदर्शी पृष्ठभूमि चाहते हैं। बेशक आप कई शैलियों बनाने के लिए और पारित जो कुछ भी आप

<style type="text/css" media="screen"> 
    .transparent { background:transparent } 
</style> 

//make dialog with transparent background 
$("#dialog").dialog({dialogClass:'transparent'}); 
//make default dialog 
$("#dialog2").dialog(); 

चेक डेमो साइट चाहते हैं कर सकते हैं: http://jsbin.com/ifoja (बुनियादी jQuery, jQuery ui, jQuery ui सीएसएस + कस्टम सीएसएस पारदर्शी वर्ग)

Answer 2

मैं नीचे दिए गए कोड लिखा था लेकिन यह अभी भी वर्ग की पृष्ठभूमि लेने .ui-widget-overlay

$("#dialog_empty").dialog({  
    dialogClass:'transparent',      
    resizable: false, 
    draggable: false, 
    modal: true,     
    height: 0, 
    width: 0, 
    autoOpen: false, 
    overlay: { 
     opacity: 0 
    } 
}); 
$('#dialog_empty').dialog('open'); 
$('#dialog_empty').css('display',''); 

Answer 3

हो सकता है कि अगर आप महत्वपूर्ण कीवर्ड सेट:

<style type="text/css" media="screen"> 
    .transparent { background:transparent !important; } 
</style> 

Answer 4

अपने संवाद कॉल में, बस मोडल सेट करें: उन संवादों के लिए गलत जो आप पारदर्शी चाहते हैं।

$("#dialog-modal").dialog({ 
      height: 140, 
      modal: false 
     }); 

Answer 5

सभी jQuery विजेट्स के लिए केवल एक ओवरले है। वजह हम यह मांग पर अस्पष्टता है बदलना होगा:

var overlayOpacityNormal = 0.3, overlayOpacitySpecial = 0; 
$('#idOfDlg').dialog({ 
    modal: true, 
    open: function() 
    { 
     overlayOpacityNormal = $('.ui-widget-overlay').css('opacity'); 
     $('.ui-widget-overlay').css('opacity', overlayOpacitySpecial); 
    }, 
    beforeClose: function() 
    { 
     $('.ui-widget-overlay').css('opacity', overlayOpacityNormal); 
    } 
}); 

Answer 6

मेरे समाधान @RonnySherer के समान है, लेकिन यह अनेक jQuery यूआई संवाद के साथ cruddy वर्ष IE7 में काम करने के लिए नहीं मालूम था। तो ओवरले तत्व की अस्पष्टता को सीधे सेट करने के बजाय मैंने बस एक सीएसएस क्लास को जोड़ा/हटा दिया जो आधुनिक ब्राउज़र के अलावा आईई 7 में काम करता था।

सीएसएस वर्ग:

div.modalOverlaySolid 
{ 
    opacity: 1 !important; 
    filter: alpha(opacity=100) !important; 
} 

जावास्क्रिप्ट: मेरा उत्तर के अंत में

$(div#divModalDialog).dialog({ 
    modal: true, 
    open: function() { 
     $(this).closest(".ui-dialog").next(".ui-widget-overlay").addClass("modalOverlayPrivate"); 
    }, 
    beforeClose: function() { 
     $(this).closest(".ui-dialog").next(".ui-widget-overlay").removeClass("modalOverlayPrivate"); 
    } 
});