時々社内ニートのメモ 目指せ非プログラマー

案件がない時は社内ニートなだけだよ (もう何でもごじゃれ c, c++, c#, VB, java, php, javascript, sql, html, css 他)

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だとここではどいつを指してるのかわからないですもんねw

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

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

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

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

参考

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