JQuery Mobile Popup not focused on first click

Question

I have a confusing issue 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. Closing it and opening it again, he suddenly centers.

This is my code:

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

and this is my html code

<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>

Does anyone have any ideas how to solve this problem? I have already tried various things, such as changing an event pageshowto pagebeforeshow, etc.

Answer 1

, , , , . .

, IMG CSS

,

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"
            });
        });
    });
});

edit: positionto , (, ), .

Answer 3

, .

, popupafteropen.

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

positionTo , open.

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

Answer 4

, - . , . , , , , . ajax-, ajax , div. .

Answer 5

In your $ (document) .ready function, wait for "afteropen" in the popup and then move the popup. Also note the “tolerance”. I set it to “0,0,0,0”, which will allow you to fill the entire screen on the iPhone 4 without any border around your popup - if your popup should fill the whole screen:

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