jQuery mobileのポップアップが消えない場合の対策方法

jQuery mobileのPopUpをボタン等で閉じる際に、data-rel="back"をつけても消えない場合の対策方法です。

今回作ったポップアップはこんな感じ↓

<!-- ポップアップを開くボタン -->
<a data-role="button" href="#testpop" data-rel="popup">PopUpを開く</a>

<!-- ポップアップ本体 -->
<article id="testpop" data-role="popup" data-history="false">
    POPUP!!!
    <button data-role="button" id="closeBtn">閉じる</button>
</article>

以下のコードを追加します。

$(function(){
    $('#closeBtn').on('tap',function(){
        // ボタンがタップされたらオーバレイのクリックイベントを発火させる
        $('#testpop-screen').click();
    });
}

解説

jQuery mobileでポップアップを表示した場合、ポップアップ周りは、「ポップアップ名-screen」という名前の要素で覆われます。
この部分をクリックすると、デフォルトではポップアップが閉じるので、それを利用して閉じるという流れです。

なので、data-dismissible="false"をつけてポップアップ外をタップしても閉じないように指定している場合は、
この方法は使えません。

PhoneGapでも正常に動くことは確認できました。