Изменить фоновое изображение Div, когда открывается модальное всплывающее окно - PullRequest
Новая
       10

Изменить фоновое изображение Div, когда открывается модальное всплывающее окно

0 голосов
/ 01 февраля 2010

Я пытаюсь динамически изменить фоновое изображение 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")) + ")";

1 Ответ

1 голос
/ 01 февраля 2010

smallImageDiv.css('backgroundImage', backgroundImageString); должно быть 

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