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

Мне сложно определить, как изменить цвет фона jQuery UI Dialog.

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

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

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

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

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

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

Ответ 1

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

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

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

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

Ответ 2

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

  • UI-диалог
    • Основной контейнер всего предмета
  • UI-диалог-заголовок
    • Вот где на самом деле появляется название
  • UI-диалог-Titlebar
    • Область, в которой заголовок диалога будет существовать
  • UI-диалог-контент
    • Область, в которой ваш div фактически загружен
  • щ-изменяемая-ручка
    • Эти divs используются для изменения размера диалогового окна, но обычно являются невидимыми в соответствии с вашими настройками
  • UI-диалог-buttonpane
    • Вот куда будут идти кнопки, если они существуют
  • UI-диалог-buttonset
    • Именно там отображаются кнопки

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

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

Ответ 3

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

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

Ответ 4

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

http://jqueryui.com/themeroller/

jQuery позволяет нам создавать custom-css. Выберите тему, которую вы хотите получить в галерее, и нажмите кнопку "Изменить", вы сможете изменить почти все диалоговое окно, а также закругленные углы.

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

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

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

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

Ответ 5

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

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

Ответ 6

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

your_stylesheet.css

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

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

your_webpage.html

    <link rel="stylesheet" type="text/css" href="#" onclick="location.href='https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css'; return false;">
    <link href="your_stylesheet.css" rel="stylesheet" type="text/css"></link>

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

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

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

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

tooltip css styles

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

change css style in browser

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

jquery-ui css background style

Формат будет

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

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

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