jquery - ポップアップ ダイアログの JQuery Mobile スライド ページが正しく機能しない

Question

私は透明なポップアップダイアログを実装しました。これは、ユーザーがタッチして右または左にスライドできるようにする必要があります。問題は、左または右にスワイプすると、最後のダイアログを閉じる代わりに新しいダイアログが作成されるため、閉じるボタンを押すと、他のすべての重複ダイアログが表示されることです。右または左にワイプすると、既存のダイアログが表示されるのではなく、新しいダイアログが作成されるようです。また、他のスワイプされたダイアログで親ダイアログの透明度を保持する方法。

ここに完全なコードのフィドルがありますhttp://jsfiddle.net/EacrU/1/

以下は、スワイプに使用しているjsコードです

$( document ).on( "pageinit", "[data-role='dialog'].background-change", function() {


var page = "#" + $( this ).attr( "id" );
// Check if we did set the data-next attribute

if ( page=='#background-changer-1' ) 
{
    try{
    // Prefetch the next page
    $.mobile.loadPage("#background-changer-2" );
    }
    catch(exception)
    {
        alert(exception);
    }

  $( document ).on( "swipeleft", page, function() {
      $.mobile.changePage("#background-changer-2", { transition: "slide", reverse: false } );
  });

    // Navigate to next page when the "next" button is clicked
    $( ".control .next", page ).on( "click", function() {
        $.mobile.changePage( "#background-changer-2" , { transition: "slide" } );
    });
}

if ( page=='#background-changer-2' ) 
{
    try{
    // Prefetch the next page
    $.mobile.loadPage("#background-changer-1" );
    }
    catch(exception)
    {
        alert(exception);
    }

  $( document ).on( "swiperight", page, function() {
      $.mobile.changePage("#background-changer-1", { transition: "slide", reverse: true } );
  });

    // Navigate to next page when the "next" button is clicked
    $( ".control .prev", page ).on( "click", function() {
        $.mobile.changePage( "#background-changer-1" , { transition: "slide" } );
    });
}
});