Индивидуальный стиль CSS jQuery UI Dialog

Я ищу стиль модального диалога (с помощью диалогового окна 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 (в зависимости от того, какой из них я хочу), но это исключало бы наличие обоих диалогов на одной странице.

Как я могу это сделать?

Ответ 1

Выполните следующее сразу после вызова диалогового окна в Ajax:

    $(".ui-dialog-titlebar").hide();
    $(".ui-dialog").addClass("customclass");

Это относится только к открытому диалогу, поэтому его можно изменить для каждого используемого.

(Этот быстрый ответ основан на другом ответе на Stack Overflow.)

Ответ 2

В текущей версии диалогового окна есть опция "dialogClass", которую вы можете использовать с вашими идентификаторами. Например,

$('foo').dialog({dialogClass:'dialog_style1'});

Тогда CSS будет

.dialog_style1 {color:#aaa;}

Ответ 3

Эта проблема возникла для меня, когда я пытался найти аналогичный ответ. Рассмотрим:

    $('.ui-dialog').wrap('<div class="abc" />');
    $('.ui-widget-overlay').wrap('<div class="abc" />');

Где abc - это имя вашей "обертки CSS" - см. вопрос о переполнении стека Пользовательские рамки CSS и темы диалога jQuery UI, где я нашел ответ от Евгений Набоков. Для получения дополнительной информации об обертке CSS, используемой с диалоговым окном jQuery UI, см. Следующее (но обратите внимание, что они действительно не решают проблему обертка CSS с диалоговым окном - вам нужны приведенные выше комментарии, чтобы помочь там, Использование нескольких jQuery пользовательских интерфейсов на одной странице (блог о волосах).

Ответ 4

В соответствии с диалоговой документацией диалогового окна плагин диалога генерирует что-то вроде этого:

<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.

Ответ 5

Я создал пользовательские стили, просто переопределив классы 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>

Ответ 6

Стандартный способ сделать это с помощью jQuery UI CSS Scopes:

<div class="myCssScope">
   <!-- dialog goes here -->
</div>

К сожалению, диалоговое окно jQuery UI перемещает диалоговые элементы DOM в конец документа, чтобы исправить потенциальные проблемы z-index. Это означает, что область обзора не будет работать (у нее больше не будет предка ".myCssScope" ).

Christoph Herold разработал обходное решение, которое я реализован как плагин jQuery, возможно, это поможет.

Ответ 7

Вы можете добавить класс в заголовок следующим образом:

$('#dialog_style1').siblings('div.ui-dialog-titlebar').addClass('dialog1');

Ответ 8

Попробуйте следующее:

#dialog_style1 .ui-dialog-titlebar { display:none; }
#dialog_style2 .ui-dialog-titlebar { color:#aaa; }

Лучшая рекомендация, которую я могу вам дать, - загрузить страницу в Firefox, открыть диалоговое окно и проверить его с помощью Firebug, затем попробовать разные селектора в консоли и посмотреть, что работает. Возможно, вам придется использовать некоторые другие селектор потомков.