jQuery Mobile Popup不以首次点击为中心 [英] Jquery Mobile Popup not centered on first click

问题描述

我在将jQuery Mobile弹出窗口居中时遇到一个令人困惑的问题.当我第一次单击它时，它没有居中，并显示在页面的角落.关闭并重新打开后，它突然居中.

I have a confusing problem with centering a jQuery Mobile popup. When I click it the first time it is not centered and appears in the corner of my page. After closing it and opening it again it is suddenly centered.

这是我的代码:

$(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等.

Does anybody have an idea how to solve this problem? I tried already various things like changing the pageshow event to a pagebeforeshow and so on.

推荐答案

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

I believe on first click the popup is loading before the image is completely downloaded, so it does not know the size to use for positioning. Therefore, the top-left corner is centered.

如果您提前知道图像大小，则可以通过CSS在弹出窗口中预先设置IMG标签的大小

If you know the image size ahead of time, you could pre-size the IMG tag in the popup via CSS

如果页面上没有太多图像，则可以尝试预加载图像

If you don't have too many images on the page, you could try pre-loading them

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

You could also add a small setTimeout delay on the popup to allow the image download to complete:

$(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');
}

这篇关于jQuery Mobile Popup不以首次点击为中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！