Тема и стиль диалога jQuery

Как изменить цвет фона строки заголовка диалогового окна jQuery?

Я посмотрел на темуроллер, но, похоже, он у меня не работает.

Спасибо


dialog themes titlebar background-color jquery
person Picflight    schedule 31.03.2009    source источник
comment
Зависит от того, какой плагин вы используете для вывода такого диалога (в самом jQuery диалогов нет).   -  person Konstantin Tarkus    schedule 31.03.2009

Ответы (6)


arrow_upward
12
arrow_downward

Я делаю так (добавляя стиль "ui-state-error" для заголовка):

<script type="text/javascript">
            $(function () {
                $("#msg").dialog({
                    open: function () {
                        $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
                    }

                });

            });
        </script>
person DonSleza4e    schedule 02.12.2009
comment
Не меняйте его с помощью javascript. Используйте CSS. - person None; 23.02.2013

arrow_upward
13
arrow_downward

Вы можете изменить его, изменив класс CSS ui-dialog-titlebar, но я настоятельно рекомендую вам использовать инструмент ThemeRoller.

Смотрите также:

person Christian C. Salvadó    schedule 31.03.2009

arrow_upward
3
arrow_downward

С каждым элементом в диалоговом окне связаны классы.

Используйте Firebug для проверки элементов и используйте CSS для их стилизации. Например, строка заголовка имеет класс «ui-dialog-titlebar».

(предполагается, что вы используете диалоговое окно пользовательского интерфейса jQuery)

person jonstjohn    schedule 31.03.2009

arrow_upward
2
arrow_downward

Используйте свойство dialogClass. Вы можете применить любой css в диалоговом окне jquery. Ниже мы форматируем блоки заголовка и контента.

<head>
<style>
.main-dialog-class .ui-widget-header{background: url("/Images/your-background.png") repeat-x scroll 34px 42px #a4cf50;font-size:16px;border:0;text-transform:uppercase}
.main-dialog-class .ui-widget-content{background-image:none;background-color:#fff}
</style>
<script>
        $('#jq_dialog').dialog({
            title: 'Detalhes do produto',
            modal: true,
            resizable: false,
            width: 500,
            maxHeight: 400,
            closeText: 'fechar',
            draggable: true,
            show: 'fade',
            hide: 'fade',
            dialogClass: 'main-dialog-class'
        });
</script>
</head>
<body>
<div id="jq_dialog">Hello StackOverflow!</div>
</body>
person Junior Mayhé    schedule 16.08.2012
comment
Я согласен. Применение или удаление классов с помощью javascript кажется неправильным. Классы css точно описывают состояние элемента, вы просто хотите изменить внешний вид элемента в этом состоянии. - person ctb; 17.05.2013
comment
как насчет изменения цвета кнопок модального всплывающего окна? - person Nathan Tregillus; 04.06.2013

arrow_upward
1
arrow_downward

Предыдущий пример работает хорошо, но только с красным цветом темы ошибки.

Вот простое решение, просто изменив изображение заголовка в css:

CSS:

.ui-widget-header-custom{ 
    background: #f6a828 url(../images/ui-bg_flat_95_0a43ac_40x100.png) 50% 50% repeat-x;      
}

JavaScript:

$('#my_dialog').dialog({ 
    open: function(event, ui){ 
        $(this).parents(".ui-dialog:first").find(".ui-widget-header")
            .removeClass("ui-widget-header").addClass("ui-widget-header-custom");
    }
});

Обратите внимание, что в отличие от предыдущего примера я удалил:

removeClass("ui-widget-header")

вместо того, чтобы просто добавить класс в:

find(".ui-dialog-titlebar")

Следует отметить, что этот пример работает с заголовком диалога без его ссылки.

person Geoffroy CALA    schedule 14.07.2011

arrow_upward
0
arrow_downward

Иногда вы не можете редактировать файл css. Итак, вы можете попробовать это:

dialog = $('<div/>').dialog({
  title: 'Dialog with css for title bar',
  open: function() {
    $(this).parents(".ui-dialog:first").find('.ui-dialog-titlebar').css('background-color','#275D9E');
  } 
});
person Hermann Schwarz    schedule 07.04.2014