当模态弹出窗口打开时更改 Div 的背景图像
我正在尝试动态更改模态弹出窗口内 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")) + ")";
I'm trying to dynamically change the background image of a div inside of a modal popup window. I first tried it with simplemodal and now I am trying it with the jqueryui dialog box. I can't get it to work on either one. Here is my code so far:
//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();
}
});
});
EDIT: Based On Suggestion From ghoppe
Apparently I'm having a strange encoding problem when setting the background image property.
Test:
//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
Solution:
I needed to escape my image path.
var backgroundImageString = "url(" + escape(mediumImage.attr("src")) + ")";
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
smallImageDiv.css('backgroundImage', backgroundImageString);
应该是
smallImageDiv.css('backgroundImage', backgroundImageString);
should be