图像未加载到jquery移动图像弹出窗口中

时间:2014-02-10 07:49:27

标签: jquery html jquery-mobile popup

当我从锚标签打电话时,它正在工作;

var surl = "http://192.168.1.233";
$("#imgLink").html("<a href='"+ surl + "/leave/" + filename + "'>" + filename + "</a>");

但是,当我从jquery移动图像弹出窗口调用时,它不再起作用了;

$("#imgLink").html("<a href='#popupPhoto' data-rel='popup' data-position-to='window' data-role='button' data-inline='true' data-transition='fade'>"+
                                            filename + "</a>"+
                                            "<div data-role='popup' id='popupPhoto' data-overlay-theme='a' data-theme='d' data-corners='false'>"+
                    "<a href='#' data-rel='back' data-role='button' data-theme='a' data-icon='delete' data-iconpos='notext' class='ui-btn-right'>Close</a>"+
                    "<img class='popphoto' src='"+ surl + "/leave/" + filename +"' style='width:150px; height:150px;'></div>");

我可以看到弹出框架而不是图像,它显示问号。

1 个答案:

答案 0 :(得分:0)

弹出式标记不在内容范围内,但仍在页面内。

  

这是 DEMO

在2个单独的变量中构建链接按钮标记和弹出标记。将链接附加到容器(#imgLink)并将弹出窗口附加到页面。最后在页面上触发刷新。

$(document).on("pageinit", "#page1", function(){
    var filename = "http://lorempixel.com/150/150/sports";

    var markup = '<a href="#popupPhoto" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="fade">' + filename + '</a>';

    var popup = '<div data-role="popup" id="popupPhoto" data-overlay-theme="a" data-theme="d" data-corners="false"><a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img class="popphoto" src="' + filename + '" style="width:150px; height:150px;"></div>';

    $("#imgLink").empty().append(markup);
    $("#page1").append(popup).trigger('create');
});