Question

我有javascript打开一个对话框（这只是一些文字，没有别的）在任何/每个页面上有人登陆我的网站（是的，我知道它是javascript风格的混合 - 仍然掌握这个）：< / p>

$(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>

谢谢

Answer 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

jquery移动对话关闭历史悠久的回归

1 个答案: