我正在尝试动态更改模态弹出窗口中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")) + ")";
答案 0 :(得分:1)
smallImageDiv.css('backgroundImage', backgroundImageString);
应该是
smallImageDiv.css('background-image', backgroundImageString);