jQuery：モーダルダイアログオーバーレイの色を設定する

Question

オーバーレイが完全に黒いjquery UIを使用してモーダルダイアログをポップしたいと思います。私はテーマでこれを設定できることを知っていますが、すべてのダイアログに黒いオーバーレイを付けることは望ましくありません。彼らの一人だけ。

ダイアログごとの背景（オーバーレイ）の色を設定する方法はありますか？おそらくそれが作成されたとき？

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

：あなたはそれと一致し、あたりのダイアログベースで背景色を変更することができるように

TIA

Answer 1

フレデリックの答えは非常に近かったが、それは一つの問題を私に左：私は、そのページに複数のダイアログを持っていた、と私は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); 

変数に格納するための主な理由は、（明示的な値へのリセットとは対照的に）保守のためのものです。この方法では、site.cssが変更されたとしても動作します。

ありがとうございました！

Answer 2

オーバーレイ要素は、ダイアログウィジェットの即時兄弟であるとui-widget-overlayクラスを公開します結果はthis fiddleです。

Answer 3

JQueryダイアログの背景は、「ui-widget-overlay」クラスを持つdivです。調整したいキースタイルは、「不透明度」、「フィルター」、「背景色」（「不透明度」と「フィルター」は異なるブラウザーの不透明度を設定する2つの異なる方法です）です。クラス定義を調整するか、ダイアログ定義で次の操作を行います

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

は、CSS値に背景を復元します

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

Answer 5

あなたはUI-ダイアログのオープンと近いイベントを使用することができます。

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

そしてCSSで必要なスタイルを追加します。例：[jqueryのUIダイアログで暗い背景]の

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