4

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イベントを a に変更するなど、すでにさまざまなことを試しpagebeforeshowました。

4

5 に答える 5

8

画像が完全にダウンロードされる前に最初のクリックでポップアップが読み込まれると信じているため、配置に使用するサイズがわかりません。したがって、左上隅が中央に配置されます。

事前に画像サイズがわかっている場合は、ポップアップで 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');
}
于 2014-01-23T15:24:20.113 に答える
0

タイムアウトも永続的な解決策ではないと思います..データの読み込みにかかる時間が確実にわからないためです。画像の読み込みであれば、おそらく画像の高さを与える方が良いと思います。データが ajax 呼び出しから来ている場合、最善の方法は、データがポップアップ div に入力された後、ajax の成功ケース内でポップアップを開くことです。これが私の場合でした。

于 2014-10-24T22:39:22.320 に答える