Я ищу стиль модального диалога (с помощью диалогового окна UI) с уникальным CSS, который отделен от традиционного диалога, поэтому, по существу, есть два диалоговых окна jQuery, каждый из которых выглядит по-другому.
Я написал один, например,
<div id="dialog_style1" class="dialog1 hidden">One content</div>
и еще
<div id="dialog_style2" class="dialog2 hidden">Another content</div>
К сожалению, я заметил, что использование отдельных CSS для стилей частей диалогового окна, например
.dialog1 .ui-dialog-titlebar { display:none; }
.dialog2 .ui-dialog-titlebar { color:#aaa; }
не работает, потому что .ui-dialog-titlebar не имеет класса .dialog1, и я не могу сделать addClass, не врываясь в плагин.
Альтернативой было бы иметь такой элемент, как body, иметь уникальный класс /id (в зависимости от того, какой из них я хочу), но это исключало бы наличие обоих диалогов на одной странице.
Как я могу это сделать?
Выполните следующее сразу после вызова диалогового окна в Ajax:
$(".ui-dialog-titlebar").hide();
$(".ui-dialog").addClass("customclass");
Это относится только к открытому диалогу, поэтому его можно изменить для каждого используемого.
(Этот быстрый ответ основан на другом ответе на Stack Overflow.)
В текущей версии диалогового окна есть опция "dialogClass", которую вы можете использовать с вашими идентификаторами. Например,
$('foo').dialog({dialogClass:'dialog_style1'});
Тогда CSS будет
.dialog_style1 {color:#aaa;}
Эта проблема возникла для меня, когда я пытался найти аналогичный ответ. Рассмотрим:
$('.ui-dialog').wrap('<div class="abc" />');
$('.ui-widget-overlay').wrap('<div class="abc" />');
Где abc - это имя вашей "обертки CSS" - см. вопрос о переполнении стека Пользовательские рамки CSS и темы диалога jQuery UI, где я нашел ответ от Евгений Набоков. Для получения дополнительной информации об обертке CSS, используемой с диалоговым окном jQuery UI, см. Следующее (но обратите внимание, что они действительно не решают проблему обертка CSS с диалоговым окном - вам нужны приведенные выше комментарии, чтобы помочь там, Использование нескольких jQuery пользовательских интерфейсов на одной странице (блог о волосах).
В соответствии с диалоговой документацией диалогового окна плагин диалога генерирует что-то вроде этого:
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div class="ui-dialog-content ui-widget-content" id="dialog_style1">
<p>One content</p>
</div>
</div>
Это означает, что вы можете добавить к любому классу ровно первое или второе диалоговое окно, используя метод jQuery closeest(). Например:
$('#dialog_style1').closest('.ui-dialog').addClass('dialog_style1');
$('#dialog_style2').closest('.ui-dialog').addClass('dialog_style2');
а затем CSS it.
Я создал пользовательские стили, просто переопределив классы jQuery в встроенном стиле. Таким образом, в верхней части страницы у вас есть связанный jQuery CSS и сразу после этого переопределяйте классы, которые вам нужно изменить:
<head>
<link href="/Content/theme/base/jquery.ui.all.css" rel="stylesheet"/>
<style type="text/css">
.ui-dialog .ui-dialog-content
{
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto;
zoom: 1;
background-color: #ffd;
border: solid 1px #ea7;
}
.ui-dialog .ui-dialog-titlebar
{
display:none;
}
.ui-widget-content
{
border:none;
}
</style>
</head>
Стандартный способ сделать это с помощью jQuery UI CSS Scopes:
<div class="myCssScope">
<!-- dialog goes here -->
</div>
К сожалению, диалоговое окно jQuery UI перемещает диалоговые элементы DOM в конец документа, чтобы исправить потенциальные проблемы z-index. Это означает, что область обзора не будет работать (у нее больше не будет предка ".myCssScope" ).
Christoph Herold разработал обходное решение, которое я реализован как плагин jQuery, возможно, это поможет.
Вы можете добавить класс в заголовок следующим образом:
$('#dialog_style1').siblings('div.ui-dialog-titlebar').addClass('dialog1');
Попробуйте следующее:
#dialog_style1 .ui-dialog-titlebar { display:none; }
#dialog_style2 .ui-dialog-titlebar { color:#aaa; }
Лучшая рекомендация, которую я могу вам дать, - загрузить страницу в Firefox, открыть диалоговое окно и проверить его с помощью Firebug, затем попробовать разные селектора в консоли и посмотреть, что работает. Возможно, вам придется использовать некоторые другие селектор потомков.