Как изменить цвет фона JQuery UI Dialog?

Question

Мне трудно разобраться, как изменить цвет фона jQuery UI Dialog.

Я видел много ссылок, как изменить / удалить строку заголовка, но не весь фон, включая эти пышные углы.

Вот моя попытка:

http://jsfiddle.net/dEvKb/11/

Проблема в том, что .ui-widget-content относится только к квадратной области в диалоговом окне, но не включает пышный угол.

Я нашел класс .ui-corner-all класс, надеясь, что он закрасит весь фон, но будет окрашена только половина диалога. (вы можете увидеть это в jsfiddle)

Кто-нибудь делал это раньше?

Answer 1

вы можете использовать этот способ

http://jsfiddle.net/dEvKb/15/

Вы должны установить для всех классов фона с помощью! Важное.

.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}

Answer 2

Используйте классы CSS:

• UI-диалоговое окно
  • Основной контейнер целиком
• ui-dialog-title
  • Здесь фактически отображается заголовок
• ui-dialog-titlelebar
  • Область, в которой был бы заголовок диалога, если он существует
• ui-dialog-content
  • Область, в которой фактически загружен ваш div
• ui-resizable-handle
  • Эти div используются для изменения размера диалога, но обычно невидимы в соответствии с вашими настройками
• ui-dialog-buttonpane
  • Вот куда пойдут кнопки, если они существуют
• ui-dialog-buttonset
  • Здесь фактически отображаются кнопки

Кроме того, в отличие от выбранного ответа, обратите внимание, ВЫ НЕ ДОЛЖНЫ ИСПОЛЬЗОВАТЬ!important.

Если вы хотите прямой вызов, настройте всеи создайте свой диалог.Загрузите страницу в Chrome или FF (Chrome легче читать).Затем просто откройте диалоговое окно и выберите элемент, который вы хотите изменить.Посмотрите на его CSS в ваших Инструментах разработчика браузера .Вы сможете увидеть строку точную , которую jqueryui использует для вызова css.Просто скопируйте эту строку в свой собственный CSS и убедитесь, что она загружена позже, и ваш диалог получит новую перезапись.

Answer 3

Если вы хотите настроить таргетинг на определенный диалог, вы можете сделать это следующим образом:

$('#yourDialog').dialog(
{
    autoOpen: false,
    open: function(e) {
        $(e.target).parent().css('background-color','orangered');
    }
});

Answer 4

Обратите внимание, что вы также можете пойти и создать свой собственный CSS, используя эту ссылку в jQuery

http://jqueryui.com/themeroller/

jQuery позволяет нам делать кастомные css. Пожалуйста, выберите нужную тему из галереи и нажмите кнопку редактирования, вы сможете изменить почти все, что касается диалогового окна, а также закругленные углы.

Затем вам нужно скачать весь пакет jQuery, в нем вы найдете папку css / custom-css, просто вставленную в ваш тег css, и она будет в основном отсортирована.

Вышеприведенные способы также верны, так как вы сможете их изменить, но вам придется искать классы и тому подобное в CSS, а jQuery делает это для нас простым способом, и это сработало и для меня. так что вы можете попробовать это тоже.

Что я в основном делаю, так это создаю две-три таблицы стилей, загружаю их, играю с ними и, наконец, выбираю одну для веб-сайта и отбрасываю остальные.

Надеюсь, это поможет ...

Answer 5

Используйте этот класс в css

.ui-dialog .ui-dialog-content {
    border: 0;
    padding: .5em 1em;
    background: #ff0000;
    overflow: auto;
    zoom: 1;
}

Answer 6

Краткий ответ

your_stylesheet.css

.ui-widget-content { background: yellow; }

Убедитесь, что ваша таблица стилей включена после таблицы стилей пользовательского интерфейса JQuery, например,

your_webpage.html

    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <link href="your_stylesheet.css" rel="stylesheet" type="text/css"></link>

Длинный ответ

Чтобы определить, какой класс и стиль следует переопределить, вам необходимо проверить подсказку.Показать подсказку:

$("#selector_for_item_with_tooltip").tooltip('open')

Щелкните правой кнопкой мыши на подсказке и выберите «осмотреть».Прокрутите вниз на вкладке «Стили», пока не найдете интересующий вас атрибут (background-color).

Вы можете нажать на значение ивведите новое значение, чтобы убедиться, что оно будет иметь желаемый эффект.

Чтобы увидеть формат, который вам потребуется использовать для переопределения форматащелкните по имени файла: строка # в правом верхнем углу, чтобы перейти к .css-файлу, который определяет атрибут (jquery-ui.css:802)

Формат будет

.ui-widget-content
{
    background: yellow;
}

Ваш .css файл должен использовать тот же стиль и быть включен после него (см. «Краткий ответ» выше).

Люди иногда неправильно добавляют!important суффикс css, чтобы обойти это требование, но это вызывает другие виды головной боли.