0

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

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

1 回答 1

0

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

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

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

于 2013-09-17T12:40:48.877 回答