title: jquery mobile dialog close going back too in history
body: <p>I have javascript open a dialog (which is just some text, nothing else) on any/every page someone lands on my site (yes, I know it's a mixture of javascript flavors - still getting to grips with this):</p>
  
  <pre><code>$(document).bind("pageinit", function(){
      if( getCookieValue('instructionseen') == false)
          {
          $.mobile.changePage("/php/instructions_alert.php");
          document.cookie ="instructionseen=yes; path=/;";
          }
      });
  </code></pre>
  
  <p>The script sets a cookie so that the user only sees the dialog once. So the idea is you come to the site, get a dialog with some instrctions, close it and carry on.</p>
  
  <p>The problem in Chrome v24 (and I'm worried it might occur in mobile browsers that I cannot test on) is that closing the dialog brings me back 2 pages in the history, so I get back to the page with the link I clicked on to get to my site.</p>
  
  <p>For example, say my site is MS, and is it linked to by RS (referrer site)</p>
  
  <pre><code>Desired: RS &gt; click to MS &gt; Dialog opens &gt; close it &gt; MS in view
  
  On Chrome: RS &gt; click to MS &gt; Dialog opens &gt; close it &gt; back to RS
  </code></pre>
  
  <p>This happens using the X provided by JQM, or this close botton I provide:</p>
  
  <pre><code>&lt;a href='#' onclick='$(".ui-dialog").dialog("close");' data-role='button' data-theme='c'&gt;Close&lt;/a&gt;
  </code></pre>
  
  <p>Dialog source:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang='en'&gt;
  &lt;head&gt;
  &lt;meta charset='utf-8'&gt;
  &lt;meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'&gt;
  &lt;title&gt;title..&lt;/title&gt;
  &lt;link rel='stylesheet' href='/design/mobile_style.css'&gt;
  &lt;link rel='stylesheet' href='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css' /&gt;
  &lt;script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script src='/js/main_and_JQM_init.min.js'&gt;&lt;/script&gt; 
  &lt;script src='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div data-role='dialog'  id='instructions_alert_div' data-overlay-theme='b'&gt;
          &lt;div data-role='header' data-theme='d'&gt;
              &lt;h1&gt;Important!&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div data-role='content' data-theme='c'&gt;
          content, just text...
          &lt;a href='#' onclick='$(".ui-dialog").dialog("close");' data-role='button' data-theme='c'&gt;Close&lt;/a&gt;
  
          &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you</p>