自定义CSS范围和jQuery UI对话框主题 [英] Custom CSS scope and jQuery UI dialog themes

问题描述

我在单个页面上使用了多个jQuery UI对话框主题，但是我遇到了错误.

I am using multiple jQuery UI dialog themes on a single page, and I have bug.

[jQuery 1.3.2] [jQuery UI 1.7.2]

[jQuery 1.3.2] [jQuery UI 1.7.2]

以下是屏幕截图(相对于自定义CSS范围):

Here is a screenshot (vs custom CSS scope):

仅在页面1)

vs native 2)

我该如何解决?

推荐答案

我今天遇到了同样的问题.您创建的任何对话框似乎都从其当前层次结构中移出，并放置在body元素的末尾，这意味着自定义

I hit the same problem today. It seems that any dialog you create is taken out of its current hierarchy and placed at the end of the body element, which means that it isn't covered by a custom CSS scope.

"dialogClass"选项也无济于事，因为它设置了dialog元素的类，但是您需要将对话框作为具有自定义类的元素的后代.

The "dialogClass" option is of no help as well, since it sets the class of the dialog element, but you need the dialog to be a descendant of an element with your custom class.

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

One way to make it work is to set the custom class on the body tag. That, however, means that the whole document is affected and you cannot use different themes on one page anymore.

我最终的方法是将对话框元素放回到具有自定义范围的元素中的一些解决方法.假设存在一个带有"myCustomScope"类的div，其中包含自定义主题应适用的所有内容；以及ID为"myDialogContent"的div应该成为对话框:

The way I ended up with is a little workaround to put the dialog element back into an element with your custom scope. Presuming that there's a div with class "myCustomScope" that contains everything the custom theme should apply to; and the div with id "myDialogContent" that should become the dialog:

// 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');

这篇关于自定义CSS范围和jQuery UI对话框主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！