Ответ 1
вы можете использовать этот путь
Вы должны установить для всех классов фон с использованием! Important.
.ui-dialog,.ui-widget,.ui-widget-content,.ui-corner-all,.foo,.ui-draggable,.ui-resizable {background:yellow !important
}
Мне сложно определить, как изменить цвет фона jQuery UI Dialog
.
Я видел много ссылок о том, как изменить/удалить строку заголовка, но не весь фон, включая те изгибный угол.
Вот моя попытка:
Проблема заключается в том, что .ui-widget-content применим только к квадратной области в диалоговом окне, но не содержит кривоугольный угол.
Я нашел класс .ui-corner-all class, надеясь, что он будет окрашивать весь фон, но только половина диалога окрашена. (вы можете увидеть это в jsfiddle)
Кто-нибудь делал это раньше?
вы можете использовать этот путь
Вы должны установить для всех классов фон с использованием! Important.
.ui-dialog,.ui-widget,.ui-widget-content,.ui-corner-all,.foo,.ui-draggable,.ui-resizable {background:yellow !important
}
Используйте классы css:
Кроме того, в отличие от выбранного ответа, обратите внимание: ВАМ НЕ ИСПОЛЬЗОВАТЬ !important
.
Если вам нужен прямой вызов, настройте все и создайте диалог. Загрузите страницу в Chrome или FF (хром легче читать). Затем просто откройте диалоговое окно и выберите элемент, который хотите изменить. Посмотрите на свой CSS в своих инструментах разработчика браузера. Вы сможете увидеть точную строку jqueryui, используемую для вызова css. Просто скопируйте эту строку в свой собственный CSS и убедитесь, что она загружена позже, и ваше диалоговое окно получит новую перезапись.
Использовать этот класс в css
.ui-dialog .ui-dialog-content {
border: 0;
padding: .5em 1em;
background: #ff0000;
overflow: auto;
zoom: 1;
}
Имейте в виду, что вы также можете пойти и создать свой собственный CSS, используя эту ссылку в jQuery
http://jqueryui.com/themeroller/
jQuery позволяет нам создавать custom-css. Выберите тему, которую вы хотите получить в галерее, и нажмите кнопку "Изменить", вы сможете изменить почти все диалоговое окно, а также закругленные углы.
Затем вам нужно загрузить весь пакет jQuery внутри него, вы найдете папку css/custom-css, только что помещенную в ваш тег css, и все будет сортироваться в основном.
Вышеупомянутые способы также верны, так как вы сможете изменить его, но вам придется искать классы и прочее, как это в CSS хорошо. JQuery делает это для нас простым способом, и это сработало для меня, чтобы вы могли попробуйте тоже.
В основном я создаю от двух до трех пользовательских таблиц стилей, а затем загружаю их и играю с ними и, наконец, выбираю один для сайта и отбрасываю остальных.
Надеюсь, это поможет...
Если вы хотите настроить таргетинг на конкретный диалог, вы можете сделать это следующим образом:
$('#yourDialog').dialog(
{
autoOpen: false,
open: function(e) {
$(e.target).parent().css('background-color','orangered');
}
});
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
).
Вы можете нажать на значение и ввести новое значение, чтобы убедиться, что оно даст желаемый эффект.
Чтобы увидеть формат, который вам нужно будет использовать для переопределения формата, щелкните имя файла: строка # в верхнем правом углу, чтобы перейти к файлу .css, который определяет атрибут (jquery-ui.css:802
)
Формат будет
.ui-widget-content
{
background: yellow;
}
Ваш файл .css
должен использовать тот же стиль и быть включен после него (см. "Краткий ответ" выше).
Иногда люди неправильно добавляют суффикс !important
css, чтобы обойти это требование, но это вызывает другие виды головной боли.