JQuery: установить цвет обложки модального диалога

Я хотел бы поместить модальный диалог, используя jquery ui, где наложение полностью черное. Я знаю, что я могу установить это в теме, но я не хочу, чтобы все диалоги имели черный оверлей. Только один из них.

Есть ли способ настроить цвет фона диалога (наложения) для каждого диалога? Возможно, когда он будет создан?

ТИА

Ответы

Ответ 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 изменится, он будет работать.

Спасибо за вашу помощь!

Ответ 2

Вы можете использовать события open и закрыть в диалоговом окне ui.

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

Ответ 3

Элемент overlay является непосредственным родством виджета диалога и предоставляет класс ui-widget-overlay, поэтому вы можете сопоставить его и изменить цвет фона для каждого диалогового окна:

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

Вы можете увидеть результаты в эту скрипту.

Ответ 4

Фон диалогового окна 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
});

Ответ 5

Изменить фон:

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

Восстановить фон до значений CSS:

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