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();
});

OR

$("#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方法，但没有成功。

包含绝对网址和亲戚，以及引号中的网址或没有引号的网址。

图像存在于目录中。

任何人都有任何想法如何使用正确的时间来应用jQuery以显示图像作为叠加层？

谢谢！

更新

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

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

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

$(".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' });

在init之后获取或设置dialogClass选项。

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

Answer 2

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

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

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

所以我挖掘，我比Moria中的矮人深入挖掘jQuery ui代码本身。我发现，实际上每个对话框都有一个独特的叠加层。它是在“私有”函数_createOverlay中创建的，其中不可可访问。实际上，我通过jquery ui namespace找到了函数$.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
            });
        }
    };
})();

我希望这会有所帮助:)

设置对话框覆盖Jquery

2 个答案: