弹出对话框上的 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" } );
    });
}
}); 

Answer 1

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

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

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