1

在 ABC 页上，我弹出一个 jQueryMobilefirst对话框。

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

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

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

  • first对话框关闭
  • second弹出对话框
  • 当我关闭second对话框时，我只剩下 ABC 页

然而，发生的事情是这样的：

  • second弹出对话框
  • 当我关闭second对话框时，我只剩下first对话框
  • 现在我必须关闭first对话框以保留页面 ABC

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

如何在关闭对话框时second从对话框中调用对话框？firstfirst

4

3 回答 3

0

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

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

setTimeout(function () {
    $.mobile.changePage('#Popup2', {
        'role': 'dialog'
    });
}, 1000);
于 2013-09-20T16:42:28.270 回答
0 
<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>

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

于 2012-09-05T07:50:22.540 回答
0

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

一旦您了解了这一点，找到解决方案就变得非常容易，并且您可以使用几个选项。

  1. 在打开的对话框上禁用 changeHash 将阻止它们被添加到历史记录中，因此您可以只打开第二个对话框，并在关闭它时显式导航回主页。
  2. 将您的链接更改为首先“关闭”第一个对话框（jQuery mobile 通过“返回”历史来处理），然后“打开”第二个对话框（导航到新页面）。这就是你认为你现在得到的效果，因为 jQM 就是这样制作动画的，但它在幕后做了一些不同的事情。
于 2013-09-20T17:07:15.547 回答