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选项阻止哈希更改。但是，这会导致对话框上的关闭按钮出现问题，因为它会在浏览器历史记录中“返回”一页以提供关闭对话框的效果。

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

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

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

1 个答案: