代码之家  ›  专栏  ›  技术社区  ›  Jon

当模式弹出窗口打开时更改Div的背景图像

  •  0
  • Jon  · 技术社区  · 16 年前

    我试图在一个模式弹出窗口中动态更改div的背景图像。我第一次用SimpleModel进行了尝试,现在用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();
            }
        });
    });
    

    编辑:根据戈普的建议

    测试:

    //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 回复  |  直到 16 年前
        1
  •  1
  •   ghoppe    16 年前

    smallImageDiv.css('backgroundImage', backgroundImageString); 应该是

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