弹出对话框中的 JQuery Mobile 滑动页面无法正常工作

Question

我已经实现了一个透明的弹出对话框，它必须允许用户通过触摸向右或向左滑动。问题是当我向左或向右滑动时，它没有关闭最后一个对话框，而是创建了一个新对话框，因此通过按下关闭按钮它会显示所有其他重复对话框。似乎当我向右或向左删除时，它会创建一个新对话框而不是显示现有对话框。还有如何在其他滑动对话框中保持父对话框的透明度。

这是带有完整代码的 fiddle 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" } );
    });
}
}); 

Answer 1

每次都创建一个新对话框的原因是散列在变化，有效地将每个页面(对话框)放入历史记录中。查看docs了解更多信息。您可以使用 changePage 选项来防止散列发生变化。然而，这会导致对话框上的关闭按钮出现问题，因为它会在浏览器历史记录中“返回”一页以产生关闭对话框的效果。

看起来你的透明背景技巧来自this question , 但它使用上一页作为当前页面的背景，这在您有嵌套对话框时会造成麻烦。我鼓励您将 jQuery Mobile 升级到 1.3.x 并查看 jQuery Mobile 1.3 的 PopUp小部件，它与对话框不同，并且比 dialog 更像您想要的。

作为旁注:在不可见对话框之间滑动的 Action 对于分页来说并不是很直观。也许考虑在单个对话框或弹出窗口中放置一个容器，您可以滑动它以显示第二页选项。