Question

在页面ABC上，我弹出一个jQueryMobile first对话框。

此对话框有一个调用第二个对话框的按钮：

<a href="/second" data-role="button" data-rel="dialog">Second dialog</a>

我想点击此按钮，结果如下：

first对话框已关闭
second对话框
当我关闭second对话框时，我留下了页面ABC

但是，会发生什么：

second对话框
当我关闭second对话框时，我将离开first对话框
现在我必须关闭first对话框以留下页面ABC

jQueryMobile文档说当在对话框中单击任何链接时，框架将自动关闭对话框并转换到请求的页面，就像对话框是正常页面一样。

关闭second对话框时，如何从first对话框调用first对话框？

Answer 1

<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
        $(function () {
            $( "#link2" ).on( "click", function( event, ui ) {
                $("dialog1").dialog('close');
            }
        });
</script>

</head>
<body>
   <div data-role="page" id="example">
          <div data-role="header">
            <h1>test</h1>
          </div>
          <div data-role="content">
            <a href="#dialog1" data-rel="dialog" id="link1">Open dialog1</a> 
        </div>
    </div>
    <div data-role="page" id="dialog1">
          <div data-role="header">
            <h1>dialog1</h1>
          </div>
          <div data-role="content">
            <a href="#dialog2" data-rel="dialog" id="link2">Open dialog2</a> 
        </div>
    </div>
    <div data-role="page" id="dialog2">
        <div data-role="header">
            <h1>dialog2</h1>
        </div>
        <div data-role="content">
        </div>
    </div>
</body>

试用代码。让我知道这是否有效。

Answer 2

打开第二个弹出窗口时设置一个较短的时间间隔。

$('#Popup1').dialog('close');

setTimeout(function () {
    $.mobile.changePage('#Popup2', {
        'role': 'dialog'
    });
}, 1000);

Answer 3

这里的主要问题是“打开”和“关闭”对话框是用词不当。你并没有真正“打开”或“关闭”它们，而是使用浏览器历史记录“导航到”或“导航” - 你要么将对话框作为页面添加到历史记录中，要么将其删除（ “回来”）。当从第一个对话框导航到另一个对话框时，它会将第二个对话框推送到浏览器历史记录中，但会使用关闭动画为第一个对话框设置动画。

一旦你了解了这一点，找到一个解决方案变得非常简单，你可以使用几个选项。

在对话框打开时禁用changeHash将阻止它们被添加到历史记录中，因此您可以打开第二个，并在关闭它时，显式导航回主页。
将您的链接更改为首先“关闭”第一个对话框（jQuery移动设备通过在历史记录中“返回”处理），然后“打开”第二个对话框（导航到新页面）。这就是你认为现在正在获得的效果，因为jQM就是这样的动画，但它正在做一些不同的事情。

打开另一个后，jquerymobile关闭对话框

3 个答案: