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窗口，因为如果未加载图像（例如死链接），则弹出窗口不会居中。

Answer 3

更新

打开弹出窗口后正在加载图像，导致错误计算弹出窗口的尺寸。

要解决此问题，请在popupafteropen事件上弹出重新定位。

$("#show_image")
    .popup("open")
    .on("popupafteropen", function () {
    $(this)
        .popup("reposition", {
        "positionTo": "window"
    });
});

您在打开弹出窗口后正在更新positionTo，您应该先将其作为选项与open内联。

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

Demo

Answer 4

我认为超时也不是一个永久的解决方案。因为你不确定知道你的数据加载需要多长时间。我认为如果它的图像加载，那么可能给图像高度更好。如果数据来自ajax调用，那么最好是在数据填充到popup div之后打开ajax成功案例中的弹出窗口。这就是我的情况。

Answer 5

在$（document）.ready函数中等到＆＃34; afteropen＆＃34;在弹出窗口然后重新定位弹出窗口。另请注意＆＃34;容差。＆＃34;我把它设置为＆＃34; 0,0,0,0＆＃34;这将让你在iPhone 4上填满整个屏幕，弹出窗口周围没有任何边框 - 如果你的弹出窗口需要填满整个屏幕：

$(document).ready(function()
{
  // Init the jqm popup
  $("#popup_modal").popup({
              positionTo: "window", history: false, tolerance: "0,0,0,0"});

  // Wait until the popup finishes opening and reposition it
  $("#popup_modal").popup({
              afteropen: function (event, ui)
              {
                  $('#popup_modal').popup('reposition', 'positionTo: window');
              }
 });

 // Show the popup initially
 $("popup_modal").popup('open');
});

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

5 个答案:

更新