Jquery Mobile Popup不以第一次点击为中心

Question

我有一个令人困惑的问题,以jQuery Mobile弹出窗口为中心.当我第一次点击它时它不居中并出现在我页面的一角.关闭它并再次打开它后突然居中.

这是我的代码:

$(document).on("pageshow",function(){
  $('.image_link').on('click', function(event){
    var id = $(this).children('img').attr("id");
    $("#show_image_img").attr("src",sPath + "/view/images/" + id);
    $("#show_image").popup('open');
    $("#show_image" ).popup({ positionTo: "window" });
  });
});

这是我的HTML代码

<div data-role="popup" id="show_image" data-theme="c" class="ui-corner-all">
  <div style="padding:20px 30px;">
    <img id="show_image_img" src="" />
  </div>
</div>

有人知道如何解决这个问题吗？我已经尝试过各种各样的事情,例如将pageshow事件更改为pagebeforeshow等等.

Answer 1

我相信在图像完全下载之前首先单击弹出窗口,因此它不知道用于定位的大小.因此,左上角居中.

如果您提前了解图像大小,则可以通过CSS在弹出窗口中预先设置IMG标记的大小

如果页面上没有太多图像,可以尝试预加载它们

您还可以在弹出窗口上添加一个小的setTimeout延迟,以允许完成图像下载:

$(document).on("pageshow", function () {
    $('.image_link').on('click', function (event) {
        $("#show_image_img").attr("src", "http://www.aai.ee/planets/nineplanets/gif/SmallWorlds.jpg");

        setTimeout(OpenPopup, 50);
    });
});

function OpenPopup(){
    $("#show_image").popup({ positionTo: "window" }).popup('open');
}

Answer 2

您可以在加载图像后重新定位弹出窗口:

$(document).on("pageshow", function () {
    $('.image_link').on('click', function (event) {
        var $img=$("#show_image_img").attr("src", "http://www.thinkstockphotos.com/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg");
        var $popup=$("#show_image").popup("open", {
            "positionTo": "window"
        });
        $img.one('load',function(){
            $popup.popup("reposition", {
                "positionTo": "window"
            });
        });
    });
});

编辑:在弹出窗口添加了positionto窗口,因为如果未加载图像(例如死链接),则弹出窗口不居中.