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

Question

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

[jQuery 1.3.2] [jQuery UI 1.7.2]

这是一个截图(vs 自定义CSS范围):

单独在页面上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');