设置对话框覆盖 Jquery

Question

我想将 jQuery 对话框的覆盖设置为图像，但似乎无法管理任务。

我在页面上有其他对话框，我不希望有背景图像，因此设置覆盖背景的 css 不能作为一揽子解决方案。

我尝试了很多不同的方法，并且我认为应用 jQuery 命令来设置带有 css 的叠加层以及将实际对话框 div 和 css 添加到 DOM 时存在时间问题。

这是我到目前为止所尝试的。

$('#submitUpload').click(function(){
    $("#uploadStart").dialog('open');
    $(".ui-widget-overlay").css({'background-image': 'url("http://www.mydomain.com/images/ftp-page-bg.gif")','opacity':'1'})
    $("#uploadForm").submit();
});

或

$("#uploadStart").dialog({       
    autoOpen: false,
    width: 400,
    modal: true,
    closeOnEscape: false,
    draggable: false,
    resizable: false,        
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close").hide();
        $(".ui-widget-overlay").css({'background-image': 'url("http://www.mydomain.com/images/ftp-page-bg.gif")','opacity':'1'})
    }
});

我也尝试在对话框代码上使用 dialogClass 方法，但没有成功。

包含绝对 url 和相对 url，以及带引号或不带引号的 url。

图片存在于目录中。

任何人对如何让 jQuery 应用正确的时间以将图像显示为叠加层有任何想法？

谢谢！

更新

对话框类名称将允许您为整个对话框设置类。我实际上只是想利用特定的 ui-widget-overlay 类并覆盖那里的背景图像。我发现尝试使用 dialogClass 覆盖背景适用于覆盖对话框的背景，而不是覆盖背景。

当对话框被添加到 DOM 时，jQuery 会在 body 标签之前加载它的 div。

我找到了一个解决方案，在对话框的打开方法中，我使用了

$(".ui-widget-overlay").addClass('artFTP');

添加一个类

.artFTP{background-image: url(../../images/ftp-page-bg.gif); opacity:1;}

并确保它是文件中将覆盖覆盖背景图像的最后一个类。

我希望这对某人有所帮助。

感谢 jjross 并 +1，您的回答让我重新回到 jQuery 文档中。

如果有人有更好的解决方案，请发帖。我会很高兴看到它。我认为可能有一种方法可以使用 CSS 来完成任务，但是（对于我的一生）无法弄清楚。

Answer 1

您应该能够在调用 jquery 之前将类添加到 HTML 代码中的 div 中。在我的测试中，这会在创建该类时自动将该类添加到对话框中。

在新类中，您应该能够指定背景图像。

例如：

调用：

$("#dialog").dialog();

开

<div id="dialog" class="thisClass" title="Edit Case Status">
  <div>some stuff</div>
</div>

导致对话框被创建 “thisClass”类。

作为替代选项，对话框看起来有一个“dialogClass”方法。它将让您将自己的类添加到对话框中（在该类中，您可以定义背景）。来自文档：

指定的类名将被添加到对话框中，用于附加主题。 代码示例

使用指定的 dialogClass 选项初始化对话框。

$( ".selector" ).dialog({ dialogClass: 'alert' });

在初始化之后获取或设置 dialogClass 选项。

//getter
var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );
//setter
$( ".selector" ).dialog( "option", "dialogClass", 'alert' );

Answer 2

我遇到了同样的问题，发现在这种情况下你的问题。我没有找到任何可以让我满意的解决方案，所以我自己做了一些事情。

首先，让我介绍一下我的问题。

我有一个页面，其中有两种对话框。带有视频的对话框和带有消息的对话框（如警报、确认、错误等）。众所周知，我们可以为对话框设置不同的类，但不能为不同的叠加层设置类。所以问题是，如何为不同的叠加层设置不同的行为？

所以我挖掘，我比 Moria 中的 Dwarves 更深入地挖掘 jQuery ui 代码本身。我发现，实际上每个对话框都有一个独特的叠加层。它是在“私有”函数 _createOverlay 中创建的， 是不可访问的。事实上，我通过 jquery ui 命名空间找到了函数 $.ui.dialog.prototype._createOverlay。因此，我能够使用基于类的逻辑进行小扩展：

(function() {
    // memorize old function
    var originFn = $.ui.dialog.prototype._createOverlay;

    // make new function
    $.ui.dialog.prototype._createOverlay = function() {
        originFn.call(this); // call old one

        // write your own extension code there
        if (this.options["dialogClass"] === "video-dialog") {
            var overlay = this.overlay; // memorize overlay (it is in old function call as this.overlay)

            var that = this; // just cause bind is event

            // my own extenstion, when you click anywhere on overlay, dialog is closed + I change css
            overlay.bind('click', function() {
                that.close(); // it is same like element.dialog('close');
            }).css({
                "background": "none",
                "background-image": "url(\'files/main-page/profile1.png\')" // this didnt work for you, but works for me... maybe I have newer version of jQuery.UI
// anyway, once you have overlay as variable, Im sure you will be able to change its css
            });
        }
    };
})();

我希望这对其他人有帮助:)