[英]Change Background Image of Div When Modal Popup Window Opens
我正在尝试在模式弹出窗口中动态更改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")) + ")";
smallImageDiv.css('backgroundImage', backgroundImageString);
应该
smallImageDiv.css('background-image', backgroundImageString);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.