自定义CSS范围和jQuery UI对话框主题

Question

我在单个页面上使用多个jQuery UI对话框主题，并且我有错误。

[1.3.2的jQuery] [jQuery用户界面1.7.2]

下面是一个屏幕截图（VS 定制CSS范围）：

单独第1页）

VS天然2）

我该如何解决这个问题？

Answer 1

今天我遇到了同样的问题。看起来您创建的任何对话框都会从当前层次结构中取出，并放置在主体元素的末尾，这意味着它不包含在自定义范围内。

“dialogClass”选项也没有帮助，因为它设置了对话框元素的类，但是您需要使用该对话框作为自定义类的元素的后代。

使其工作的一种方法是在body标签上设置自定义类。但是，这意味着整个文档都会受到影响，并且不能在一个页面上使用不同的主题。

我最终的解决方法是使用自定义作用域将对话元素放回到元素中。假设有一个包含“myCustomScope”类的div，其中包含自定义主题应用的所有内容;与ID为“myDialogContent”的DIV应该成为对话：

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

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

三江源安德烈亚斯你的答案

Answer 3

有迹象表明，得到取出正常的HTML流的其他的jQuery UI元素，除了对话框。例如，自动完成小部件。

我发现，这些方针的东西，似乎这样的伎俩：

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

虽然window.load这样做可能不是很理想。

Answer 4

Andrea的回答让我对覆盖层工作的iframe和模态有了一个了解。打开后必须设置宽度和高度，并将覆盖图添加到作用域div。

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 5

对话框小部件通过设计附加到主体。如果您觉得不自然，将它移到DOM中的其他位置是jQuery UI开发团队无法预料的，​​那么一种解决方案可能就是将您的作用域应用于对话框，方法与将其应用于使用它的其他元素的方式相同，通过简单地用你的主题范围为类包装它在一个div标签：

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

Answer 6

你应该对话框的创建后 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中测试。