web-dev-qa-db-ja.com

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

オーバーレイが完全に黒であるjquery uiを使用して、モーダルダイアログをポップしたいです。テーマでこれを設定できることは知っていますが、すべてのダイアログに黒いオーバーレイを表示したくありません。それらの1つだけです。

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

TIA

overlayjquery-ui-dialog
27
mtmurdock

フレデリックの答えは非常に近かったが、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が変更されても機能します。

ご協力いただきありがとうございます！

3
mtmurdock

Ui-dialogのopenおよびcloseイベントを使用できます。

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

そして、CSSに必要なスタイルを追加します。例：

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

オーバーレイ要素は、ダイアログウィジェットの直接の兄弟であり、ui-widget-overlayクラス。これにより、ダイアログごとに一致して背景色を変更できます。

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

this fiddle で結果を見ることができます。

12
Frédéric Hamidi

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
});
9
Michael Erickson

背景を変更する：

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

背景をCSS値に復元します。

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