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手機對話關閉在歷史中關閉

回答

相關問題