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

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

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

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

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

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

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

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

12
dialog javascript jquery styles

5 ответов

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

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

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

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

21

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

  • ui-dialog
    • главный контейнер всего
  • ui-dialog-title
    • вот где на самом деле появляется название
  • ui-dialog-titlebar
    • область, где заголовок диалога будет, если существует
  • ui-dialog-content
    • региона, где div-это на самом деле загружается
  • ui-изменяемый размер-handle
    • эти divs используются для изменения размера диалога, но обычно невидимы в соответствии с вашей настройкой
  • ui-dialog-buttonpane
    • вот где кнопки будут идти, если существуют
  • ui-dialog-buttonset
    • Это где кнопки на самом деле появляются

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

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

17

Если вы хотите конкретного диалога вы можете сделать это так: 

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

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

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

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

http://jqueryui.com/themeroller/

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

затем вам нужно загрузить весь пакет jQuery в нем вы найдете css / custom-CSS папка просто поместите в свой тег css, и все будет отсортировано в основном.

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

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

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

1