2

我有 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>

谢谢

4

1 回答 1

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：对话框

于 2013-02-27T14:29:39.067 回答