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

Question

Я использую несколько тем диалога JQuery UI на одной странице, и у меня ошибка.

[jQuery 1.3.2] [jQuery UI 1.7.2]

Вот скриншот (против настраиваемая область CSS ):

Один на странице 1)

против родного 2)

Как я могу это исправить?

Answer 1

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

Answer 2

Вы должны 1) Завернуть элемент .ui-dialog после создания диалога.2) Завернуть элемент .ui-widget-overlay после открытия диалога.Поскольку элемент .ui-widget-overlay создается / уничтожается каждый раз, когда диалог открывается / закрывается, вам также следует 3) Удалить пустую оболочку .ui-widget-overlay при закрытии диалога (в противном случае вы получите много пустых оболочек).

$(function() {
$("#dialog").dialog({
    position: "center",
    autoOpen: false,
    modal: true,
    create: function(event, ui){
        $('.ui-dialog').wrap('<div class="your-class" />');
    },
    open: function(event, ui){
        $('.ui-widget-overlay').wrap('<div class="your-class" />');
    },
    close: function(event, ui){
        $(".your-class").filter(function(){
            if ($(this).text() == "")
            {
                return true;
            }
            return false;
        }).remove();
        }
    });
});

Протестировано в JQuery UI 1.8.13.

Answer 3

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

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

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

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

Answer 4

Диалоговое окно виджета добавлено к телу.Если вам неудобно перемещать его куда-то еще в DOM, чего команда разработчиков JQuery UI не ожидаетпросто поместив его в тег div с областью действия вашей темы в качестве класса:

$("#mydialog").dialog().parent(".ui-dialog").wrap("<div class='custom-theme-css-scope'></div>");

Answer 5

Ответ Андреа привел меня к этому для фреймов и модалов с наложением. Пришлось установить ширину и высоту после открытия и добавить оверлей к области видимости.

var d = $("<iframe src=\"" + src + "\" id=\"upload_iframe\" />")
.dialog(
{
    title: "Import",
    autoOpen: false,
    width: 1000,
    height: 600,
    modal: true,
    resizable: false,
    draggable: false
});

var scope = $("<div>").addClass("jquery-ui-scope").appendTo("body");

d.parent(".ui-dialog").appendTo(scope);
d.dialog("open").width(990).height(590);
$(".ui-widget-overlay").appendTo(scope);

Answer 6

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

Благодарю Андреаса за ответ