Question

我在一个页面上使用多个jQuery UI对话框主题，我有bug。

[jQuery 1.3.2] [jQuery UI 1.7.2]

以下是截图（vs 自定义CSS范围）：

Enter image description here

单独在页面上1）

vs native 2）

我该如何解决这个问题？

Answer 1

我今天遇到了同样的问题。您创建的任何对话框似乎都从其当前层次结构中取出并放置在body元素的末尾，这意味着它不会被自定义CSS范围覆盖。

“dialogClass”选项也没有任何帮助，因为它设置了dialog元素的类，但你需要将对话框作为自定义类的元素的后代。

使其工作的一种方法是在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

你应该 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 UI元素可以从普通的HTML流中获取。例如，自动完成小部件。

我发现沿着这些方向的东西似乎可以解决问题：

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

尽管在window.load上执行此操作可能并不理想。

Answer 4

对话框小部件按设计附加到正文。如果你觉得在jQuery UI开发团队无法预料到的DOM中移动它是不舒服的，一个解决方案可能就是将你的范围简单地应用到对话框中，就像你将它应用到使用它的其他元素一样，只需将其包装在div标签中，主题的范围为类：

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

Answer 5

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

谢谢Andreas的回答

Answer 6

Andrea的回答让我对iframes和模态进行了覆盖工作。打开后必须设置宽度和高度，并将叠加层附加到范围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);

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

6 个答案: