JQuery UI Dialog индивидуальный стиль CSS - PullRequest
Новая
       18

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

34 голосов
/ 20 августа 2009

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

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

Ответы [ 8 ]

62 голосов
/ 22 июля 2011

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

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

Тогда CSS будет 

.dialog_style1 {color:#aaa;}
23 голосов
/ 21 августа 2009

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

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

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

(Этот быстрый ответ основан на другом ответе о переполнении стека.)

4 голосов
/ 28 августа 2012

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

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

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

3 голосов
/ 17 апреля 2013

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

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

<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 closest () Например: 

$('#dialog_style1').closest('.ui-dialog').addClass('dialog_style1');

$('#dialog_style2').closest('.ui-dialog').addClass('dialog_style2');

, а затем CSS это.

2 голосов
/ 21 августа 2009

Стандартный способ сделать это с помощью пользовательского интерфейса jQuery CSS Scopes : 

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

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

Кристоф Херольд разработал обходной путь , который я реализовал как плагин jQuery , возможно, это поможет.

1 голос
/ 20 августа 2009

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

$('#dialog_style1').siblings('div.ui-dialog-titlebar').addClass('dialog1');
0 голосов
/ 21 августа 2009

Попробуйте это: 

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

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

...