JQuery Mobile sliding pages on popup dialog not working properly

Question

I have implement a transparent popup up dialog , which must allow user to slide right or left by user touch. The problem is when i swipe to left or right , instead of closing last dialog it creates a new one so by pressing close button it shows all other duplicate dialog. It seems like when i wipe right or left it creates a new dialog instead of displaying the existing one. Also how to persist the transparency of parent dialog in other swiped dialogs.

Here is the fiddle with full code http://jsfiddle.net/EacrU/1/

below is my js code that i am using for swipe

$( 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" } );
    });
}
}); 

Answer 1

The reason that it appears a new dialog is being created each time is that the hash is changing, effectively putting each page (dialog) into the history. See the docs for more information. You can prevent the hash from changing with an option to changePage . This however, causes an issue with the close button on the dialog, because it goes "back" in the browser history one page to give the effect of closing the dialog.

It looks like your hack to have a transparent background comes from this question , but it uses the previous page as the current page's background, which causes trouble when you have nested dialogs. I encourage you to upgrade jQuery Mobile to 1.3.x and take a look at jQuery Mobile 1.3's PopUp widget, which is different from the dialog, and works more like what you want than dialog does.

As a sidenote: the act of swiping between invisible dialogs isn't really intuitive for paging. Maybe consider just having a container inside a single dialog or popup that you can swipe to reveal the second page of options.