Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery Mobile sliding pages on popup dialog not working properly
    text
    copied!<p>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. </p> <p>Here is the fiddle with full code <a href="http://jsfiddle.net/EacrU/1/" rel="nofollow">http://jsfiddle.net/EacrU/1/</a></p> <p>below is my js code that i am using for swipe</p> <pre><code>$( 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" } ); }); } }); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload