Пользовательский объем CSS и jQuery диалоговые темы UI

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

Параметр "dialogClass" тоже бесполезен, поскольку он устанавливает класс элемента диалога, но вам нужно, чтобы диалог был потомком элемента с вашим настраиваемым классом.

Один из способов заставить его работать - установить собственный класс в теге body. Однако это означает, что затрагивается весь документ, и вы больше не можете использовать разные темы на одной странице.

В итоге я нашел небольшое обходное решение, чтобы вернуть элемент диалога обратно в элемент с вашей настраиваемой областью действия. Предполагая, что существует div с классом myCustomScope, который содержит все, к чему должна применяться настраиваемая тема; и div с идентификатором «myDialogContent», который должен стать диалоговым окном:

// Create the dialog, but don't open it yet
var d = $('#myDialogContents').dialog({
    autoOpen: false
    // Other dialog options
});
// Take the whole dialog and put it back into the custom scope.
d.parent('.ui-dialog').appendTo('.myCustomScope');
// Open the dialog (if you want autoOpen).
d.dialog('open');

//Try this to fix problem
//note: jquery-ui-1.7.2

var dwrap = [false, false];
//0 - dialog1 flag(modal: true)
//1 - dialog2 flag(modal: false)

//?dialog1 = your dialog id
// example: mytest-dialog1
//?dialog2 = your dialog id
// example: mytest-dialog2

//?custom css scope = your custom css scope
// example: .my-dialog-themes

 function DialogTheme(dialog){
    switch (dialog){
     case 0 :
      if( !dwrap[0] ){ 
       $("div[aria-labelledby*='ui-dialog-title-?dialog1']").wrap("<div class='?custom css scope'></div>"); 
       dwrap[0] = true; 
      }
      //for overlay no good way but i dont see another
     $(".ui-widget-overlay").wrap("<div class='?custom css scope'></div>"); 
     break; 
     case 1 : 
      if( !dwrap[1] ){
       $("div[aria-labelledby*='ui-dialog-title-?dialog2']").wrap("<div class='?custom css scope'></div>"); 
       dwrap[1] = true; 
       }
     break; 
     default : 
     break; 
    }
 }

//Use:
//after open dialog call DialogTheme(0) for modal and DialogTheme(1) for none modal
//example:

 $("#?dialog1").dialog('open');
 DialogTheme(0);

//This way work correct on the page except overlay, 
//note you must have jquery-ui-1.7.2 other versions not tested
//It's all

Спасибо Андреасу за ответ

Есть другие элементы пользовательского интерфейса jQuery, которые удаляются из обычный поток HTML в дополнение к диалогам. Например, виджет автозаполнения.

Я обнаружил, что кое-что в этом роде, кажется, помогает:

$(window).load(function() {
 $('.ui-autocomplete').wrap('<div class="css_scope_selector" />');
});

Хотя выполнение этого с помощью window.load может быть не идеальным.