jQuery: установить модальный цвет наложения диалогового окна - PullRequest
Новая
       8

jQuery: установить модальный цвет наложения диалогового окна

27 голосов
/ 14 февраля 2012

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

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

ТИА

Ответы [ 5 ]

41 голосов
/ 24 марта 2013

Вы можете использовать события 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;    
}
12 голосов
/ 14 февраля 2012

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

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

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

9 голосов
/ 14 февраля 2012

Фон диалогового окна 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
});
3 голосов
/ 06 февраля 2013

Сменить фон: 

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

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

$(".ui-widget-overlay").css({background: '', opacity: ''});
3 голосов
/ 14 февраля 2012

Ответ Фредерика был очень близок, но у меня осталась одна проблема: у меня было несколько диалогов на этой странице, и после того, как я изменил оверлей для одного диалога, он менял их все, пока страница не была перезагружена. Тем не менее, это дало мне идею;

Сначала я сохранил значения по умолчанию в переменных (область страницы), а затем установил свой собственный стиль. 

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

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

...