jquery-ui - 设置对话框覆盖 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');

添加一个类(class)

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

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

我希望这可以帮助别人。

感谢和 +1 jjross，你的回答让我跳回 jQuery 文档。

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

Answer 1

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

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

例如:

调用:

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

在

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

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

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

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

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

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

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

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