jQuery Mobile のpopupが移動してしまうのを防ぐ

jQuery mobile (1.3) のpopupで場所を指定して開いたのにWindowサイズを変更したり、Android端末でスクロールしようとしたりするとpopupが中央に移動してしまいます。

今回の記事ではそれを防ごうってわけです。

まず、Windowサイズを変更した際になぜ中央に移動してしまうのか

知りません。・・・

なんででしょうね。

座標を再計算しないと何かしらの不都合があるのでしょう。

それなのにpopupの後ろに表示しているあいつ(モーダル時)はサイズそのままなんですよね・・・

ま、移動されてしまうわけです。

なので、移動後のイベントが取れるのでそいつを利用します。

popupbeforepositionイベント

ポップアップの要素にイベント追加

$("#myPopup").on("popupbeforeposition", function( e, data ) {
  delete data.x;
  delete data.y;
  data.positionTo = "#myLink";
});

dataに座標が入っているようです。
data.xはx軸座標
data.yはy軸座標
data.positionTo はwindowだとかoriginだとかの情報が入っています。

初めはdata.positionTo = "origin";でいけるんじゃね？と思ったのですがダメでした。
originだとここではどいつを指してるのかわからないですもんねｗ

で、結果としては
data.xを削除
data.yを削除
data.positionToに要素のセレクタを指定してやるとうまくいきました。

座標で表示したい場合は・・・
たぶんdata.xとdata.yを指定してやれば・・・
やってないのでわかりませんｗ

暇があればやっておきますね(←やらないパターン

それではあなたも楽しいpopup生活を！

参考

Popup doesn't take into account positionTo on resize? · Issue #4905 · jquery/jquery-mobile · GitHub