Question

jQuery UI对话框有一个dialogClass选项，这很好，因为对话框直接嵌套在文档<body>中。但是，当将modal选项设置为true时，ui-widget-overlay div也会直接在正文中呈现（作为对话框div的兄弟）。

在使用overlayClass打开jQuery UI对话框时，是否有办法实际应用modal: true？

我知道我们可以通过赋予<body>类属性或直接覆盖.ui-widget-overlay类来将自定义css应用于叠加层。我正在寻找一种能够使css定义如下工作的解决方案：

.my-custom-class.ui-widget-overlay {
    opacity: .5;
}

Answer 1

实际上有一种非常简单的方法可以使用CSS。（只要您下载了jQuery UI库）。应该有一个jquery样式表，标题为：“jqGrid-custom.css”

只需进入叠加部分并调整此行：

.ui-widget-overlay { background: #aaaaaa url(/img/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity:.9;filter:Alpha(Opacity=90); }

Answer 2

没有选择。看看来源，也没有一种简单的方法可以在那里进行讨论。作为参考，这里是添加类的位：

    var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
        .appendTo(document.body)
        .css({
            width: this.width(),
            height: this.height()
        });

您可能最好只是自定义/更新您的css以覆盖/扩展默认样式。

打开jQuery UI对话框时，我可以设置自定义ui-widget-overlay类吗？

2 个答案: