jquery手机对话关闭在历史中关闭

我有JavaScript在任何/每个页面上打开一个对话框（这只是一些文本，没有别的）有人登陆我的网站（是的，我知道这是一个JavaScript风格的混合 - 仍然得到与此交手）：jquery手机对话关闭在历史中关闭

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

该脚本会设置Cookie，使用户只能看到对话框一次。所以你的想法是你来到现场，与一些instrctions对话，关闭它，并继续。

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>

谢谢

来源

2013-02-26 KevInSol

忘了说，这是JQM 1.2最后的 – KevInSol 2013-02-26 18:32:15

你可以发布对话框的标记吗？ – Omar 2013-02-26 22:09:48

@Omar - 发布了对话框。你在一周或两周前帮助我解决了类似的问题，没有太多对话的运气！ – KevInSol 2013-02-27 11:58:32

你走了。

标记：

<!-- 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

来源

2013-02-27 14:29:39 Omar

嗨，非常感谢你。进一步对你的最后评论，页面RS不在我的网站上，它是从第三方到我的网站的链接，但是你的代码对于学习的角度来说是有用的 – KevInSol 2013-02-28 14:52:59

哦，我明白了..但是它解决了你的问题吗？如果没有，我会修改它，请让我知道 – Omar 2013-02-28 15:20:05

嗨，我已经去了，并使用了一个弹出式窗口 - 我发布了评论，我在看你之前发布该解决方案。它弹出对话框，当他看到它弹出在PC，Andriod和Iphone上运行良好 – KevInSol 2013-02-28 16:55:59

jquery手机对话关闭在历史中关闭

回答

相关问题