jQuery UI對話框覆蓋

Question

我已經使用了不同的jQuery對話框。對於一些對話框，我想要一個透明的背景。 如果我更改.ui-widget-overlay類中的background CSS，那麼它將應用於所有對話框。

如何爲不同的對話框設置不同的背景顏色？

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的CSS +自定義CSS透明類）

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

在您的對話框調用中，只需爲要透明的對話框設置模態：false。

$("#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，但它似乎並沒有在眉頭老IE7工作與多個jQuery UI的對話。因此，除了直接設置疊加元素的不透明度外，我還簡單地添加/刪除了除了現代瀏覽器之外在IE7中工作的CSS類。

CSS類：

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

的Javascript：在我的回答結束

$(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"); 
    } 
});