jquery mobile dialog close 也可以追溯到历史答案

【问题标题】：jquery mobile dialog close going back too in historyjquery mobile dialog close 也可以追溯到历史
【发布时间】：2013-02-26 18:30:31
【问题描述】：

我让 javascript 在有人登陆我网站的任何/每个页面上打开一个对话框（只是一些文本，没有其他内容）（是的，我知道它是 javascript 风格的混合体 - 仍在处理这个问题）：

$(document).bind("pageinit", function(){
    if( getCookieValue('instructionseen') == false)
        {
        $.mobile.changePage("/php/instructions_alert.php");
        document.cookie ="instructionseen=yes; path=/;";
        }
    });

脚本设置了一个 cookie，以便用户只看到一次对话框。所以这个想法是你来到这个网站，得到一个包含一些指令的对话框，关闭它并继续。

Chrome v24 中的问题（我担心它可能会出现在我无法测试的移动浏览器中）是关闭对话框会使我回到历史记录中的 2 页，所以我返回到带有链接的页面我点击进入我的网站。

例如，假设我的网站是 MS，它是否通过 RS（引荐网站）链接到

Desired: RS > click to MS > Dialog opens > close it > MS in view

On Chrome: RS > click to MS > Dialog opens > close it > back to RS

使用 JQM 提供的 X 或我提供的关闭按钮会发生这种情况：

<a href='#' onclick='$(".ui-dialog").dialog("close");' data-role='button' data-theme='c'>Close</a>

对话来源：

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>title..</title>
<link rel='stylesheet' href='/design/mobile_style.css'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src='/js/main_and_JQM_init.min.js'></script> 
<script src='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'></script>
</head>
<body>

<div data-role='dialog'  id='instructions_alert_div' data-overlay-theme='b'>
        <div data-role='header' data-theme='d'>
            <h1>Important!</h1>
        </div>

        <div data-role='content' data-theme='c'>
        content, just text...
        <a href='#' onclick='$(".ui-dialog").dialog("close");' data-role='button' data-theme='c'>Close</a>

        </div>
</div>

</body>
</html>

谢谢

【问题讨论】：

忘了说，这是JQM 1.2 final
你能张贴你的对话框的标记吗？
@Omar - 对话已发布。你在一两周前帮助我解决了一个类似的问题，我在对话方面不太走运！
我正在研究一种替代方法，使用弹出窗口而不是对话框，到目前为止它看起来很有希望 - 以防万一有人花时间在这上面。
它返回到“R5”页面，因为对话框是由该页面生成的。它应该由“MS”页面生成。因此，试试这个。 $("#MS").bind("pageinit", function() 和对话框中的 data-rel="back"。它应该回到“MS”页面。

标签： jquery jquery-mobile mobile

【解决方案1】：

你去。

标记：

 <!-- Start of first page -->

 <div data-role="page" id="page1">

    <div data-role="header">
    <h1>page1 header</h1>
</div><!-- /header -->

<div data-role="content">   
    <p>page 1</p>

    <a href="#page2" data-role="button">Page 2</a>


</div><!-- /content -->

<div data-role="footer">
    <h4>Page1 Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->


 <!-- Start of second page -->

 <div data-role="page" id="page2">

<div data-role="header">
    <h1>Bar</h1>
</div><!-- /header -->

<div data-role="content">   
    <p>password accepted</p>        
    <p><a href="#test" data-rel="dialog">dialog</a></p>

</div><!-- /content -->

<div data-role="footer">
    <h4>Page2 Footer</h4>
</div><!-- /footer -->
 </div><!-- /page -->

对话框：

 <div data-role='dialog'  id='test' data-overlay-theme='b'>
    <div data-role='header' data-theme='d'>
        <h1>Important!</h1>
    </div>

    <div data-role='content' data-theme='c'>
    content, just text...
      <a href='#' onclick='$(".ui-dialog").dialog("close");' data-role='button' data-theme='c'>Close</a>

    </div>
</div>

JQM：

$("#page2").on('pageinit', function(event) {
$.mobile.changePage($("#test"), {
    transition : 'pop',
    reverse    : true,
    changeHash : true
});
 });

JSfiddle：dialog

【讨论】：

嗨，非常感谢。除了您最后的评论，页面 RS 不在我的网站上，它是来自第三方的指向我网站的链接。但是从学习的角度来看，您的代码很有用。
哦，我明白了..但这能解决您的问题吗？如果没有，我会修改它。请告诉我。
嗨，好吧，我已经使用了弹出窗口来代替 - 我在 cmets 中发布了在您发布该解决方案之前我正在查看的内容。我的客户在看到对话时实际上更喜欢它。弹出窗口在 PC、Andriod 和 Iphone 上运行良好