title: How to make forward button work on this example using HTML5 history?
body: <p>In this example we manage to make back button work but forward button seem to be a problem, when forward button is pressed,  <code>#modal</code> should reappear but it did not. Any idea to fix it?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).bind('popstate', function() {
    $('#modal').hide();
  });
  
  $(".view").click(function() {
    history.pushState(null, null, null);
    $("#modal").show();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#modal {
    position: relative;
    display: none;
    height: 100px;
    width: 100px;
    background-color: grey
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button class="view"&gt;Click&lt;/button&gt;
  &lt;div id="modal"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsbin.com/helivu" rel="nofollow">Here is JSBin</a></p>
  
  <p>Thanks! </p>