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

Question

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

[jQuery 1.3.2] [jQuery UI 1.7.2]

这是一个屏幕截图（与自定义 CSS 范围相比）：

单独在页面 1)

与原生 2)

我怎样才能解决这个问题？

Answer 1

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

“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

您应该 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

对话框小部件按设计附加到正文。如果您对将其移动到 DOM 中的其他位置感到不舒服，而 jQuery UI 开发团队不会预料到，那么一种解决方案可能是简单地将您的范围应用于对话框，就像您将其应用于使用它的其他元素一样，只需将其包装在一个 div 标记中，并将您的主题范围作为类：

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

Answer 5

Andrea's answer led me to this for iframes and modals with the overlay working. Had to set the width and height after opening and append the overlay to the scoped div as well.

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

谢谢安德烈亚斯的回答