Change Background Image of Div When Modal Popup Window Opens
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', background开发者_StackOverflow社区ImageString);
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")) + ")";
smallImageDiv.css('backgroundImage', backgroundImageString);
should be
smallImageDiv.css('background-image', backgroundImageString);
精彩评论