Question

我有一个第三方应用使用jqUI的场景。因此，对于我的自定义，我希望使用另一个版本并提供自定义CSS范围。使用.dialog（）jqUI将目标移动到我的自定义范围之外，以进行绝对定位/叠加。这是一个解决方法：

// custom jQ namespace
var d = my.jq('#my-modal').dialog({ modal: true, autoOpen: false});
d.parent('.ui-dialog').wrap('<div class="my-part"></div>');
d.dialog('open');

然而，这现在打破了叠加阴影。有人有解决方法吗？

Answer 1

起初我认为这不再是一个问题，但实际上是这样。这是一个解决方法：

// custom jQ namespace
var d = my.jq('#my-modal').dialog({ 
  modal: true, 
  autoOpen: false, 
  'open': function () { my.jq('.ui-widget-overlay').wrap('<div class="my-part"></div>'); }
});
d.parent('.ui-dialog').wrap('<div class="my-part"></div>');
d.dialog('open');

Answer 2

使用JQuery UI 1.10.2，我可以让模态对话框使用CCS Scope的唯一方法是将对话框和叠加层包装在“open”事件中，如下所示：

open: function () {
    $('.ui-widget-overlay').each(function () {
        $(this).next('.ui-dialog').andSelf().wrapAll('<div class="CSSScopeClass" />');
    });
}

这种方法似乎唯一不适用的是将“width”设置为“auto”。我还必须手动设置对话框宽度。

Answer 3

我意识到这个答案已经很晚了，但当我试图通过在谷歌搜索找到类似的答案时，这个问题出现了，所以我认为我会包含这个以防万一它可以帮助任何人进行类似搜索：

    $('.ui-dialog').wrap('<div class="abc" />');
    $('.ui-widget-overlay').wrap('<div class="abc" />');

abc是“CSS包装器”的名称 - 请参阅this我从Evgeni Nabokov找到答案的地方。有关与JQueru UI对话框一起使用的CSS包装器的更多信息 - 请参阅以下内容（但请注意，它不能解决带有对话框的CSS包装器的问题 - 您需要上述注释来帮助那里：Filament blog ）

jQuery UI自定义CSS范围.dialog（）怪癖

3 个答案: