模态弹出窗口打开时更改 Div 的背景图像答案

【问题标题】：Change Background Image of Div When Modal Popup Window Opens模态弹出窗口打开时更改 Div 的背景图像
【发布时间】：2010-02-01 17:04:43
【问题描述】：

我正在尝试动态更改模态弹出窗口内 div 的背景图像。我第一次尝试使用 simplemodal，现在我尝试使用 jqueryui 对话框。我无法让它在任何一个上工作。到目前为止，这是我的代码：

//Jquery Dialog Attempt:  
//I have also tried it in the open event
        $(".Previous tr td img:not(.Help)").live("click", function(){
            var mediumImage = $(this).parent().find("img.mediumImage");
            var smallImageDiv = $("div#modal table tr td div#smallerImage");
            var backgroundImageString = "url(\"" + mediumImage.attr("src").toString() + "\")";
            smallImageDiv.css('backgroundImage', backgroundImageString);
            $("div#modal").dialog({
                height:300,
                modal:true,
                close: function(){
                    $(this).dialog('destroy');
                }
            });
        });

//SimpleModal attempt
$(".Previous tr td img:not(.Help)").live("click", function(){
    var mediumImage = $(this).parent().find("img.mediumImage");
    var smallImageDiv = $("div#modal table tr td div#smallerImage");
    $("#modal").modal({
        onOpen: function(){
            var backgroundImageString = "url(\"" + mediumImage.attr("src").toString() + "\")";
            smallImageDiv.css('backgroundImage', backgroundImageString);
        },
        onShow: function(){
            $("html").css("overflow", "hidden");
        },
        onClose: function(){
            $("html").css("overflow", "auto");
            $(".Previous tr td img").live("click", function(){});
            $.modal.close();
        }
    });
});

编辑：基于 ghoppe 的建议显然我在设置背景图像属性时遇到了一个奇怪的编码问题。

测试：

//The path to the image is: Thumbnails\\2010\1\28\THUMBNAIL\0123456-0123a1of3_med.JPG
var backgroundImageString = "url(" + mediumImage.attr("src").toString() + ")";
smallImageDiv.css('background-image', backgroundImageString);
alert(backgroundImageString.toString()); //This is correct
alert(smallImageDiv.css('background-image').toString()); //Lots of escaped characters

解决方案：我需要转义我的图像路径。

var backgroundImageString = "url(" + escape(mediumImage.attr("src")) + ")";

【问题讨论】：

哈！在考虑过放弃 .toString() 之后，我只是建议这样做。恭喜。 :)

标签： javascript jquery-ui encoding simplemodal

【解决方案1】：

smallImageDiv.css('backgroundImage', backgroundImageString); 应该是

smallImageDiv.css('background-image', backgroundImageString);

【讨论】：

仍然没有出现在 div 中，不过感谢您的建议！
对不起，我现在意识到，根据api.jquery.com/css，jquery 了解多字属性的 DOM 格式，所以这不是你的问题。您是否检查过图像是否出现 404？
您是否尝试过完全删除.toString()？ .attr() 将已经包含一个字符串。