title: Bootstrap modal and HTML5 history API
body: <p>(UPDATE: it looks like the issue is related to chrome only. Works fine in Safari and Firefox.)</p>
  
  <p>I am trying to manipulate URLs using HTML5 History API with Boostrap 3.2 modal windows.</p>
  
  <p>Imagine this as a single web app page with multiple photos. When the user clicks on a photo a modal window is shown and remote content is loaded (URL is changed to the one of the remote content).</p>
  
  <p>Here are all the use cases I'd like to implement:</p>
  
  <ol>
  <li>The users clicks on the photo. Popup is shown, URL is changed (DONE)</li>
  <li>The users closes the popup (back button or close button). URL goes back to the one of the original page (DONE)</li>
  <li>Now the user clicks on the Forward button. The previous popup is shown (DONE)</li>
  <li>While on the page with the popup open, the user visit an external website and then comes back to my site. (STUCK on this!).</li>
  </ol>
  
  <p>Can't find a way to implement #4. When the user comes back, the URL is the one of the remote content of the popup but instead of reloading the page (content can be accessed in popup or as a standalone page) the browser (tested in Chrome) just shows the AJAX content of the popup previously loaded.</p>
  
  <p>Any ideas on how to fix this?</p>
  
  <p>Here is my code so far:</p>
  
  <pre><code>// Open Popup
  $(document).on('click', '.popup-link', function (e) {
      e.preventDefault();
      var path = $(this).attr('href');
      state = {action: 'popup'};
      $('#popup').modal({
          remote: path,
      });
      // Change URL in browser
      history.pushState(state, '', path);
  });
  
  // Restore URL when popup is closed
  $(document).on("hidden.bs.modal", function (e) {
      // Empty modal window
      $(e.target).removeData("bs.modal").find(".modal-content").empty();
      var currentstate = history.state;
      if (currentstate) {
          history.back();
      }
  });
  
  // Listen for history state changes
  window.addEventListener('popstate', function(e) {
      var state = history.state;
      // back button pressed. close popup
      if (!state) {
          $('.modal-open #popup').modal('hide');
      }
      else {
          // Forward button pressed, reopen popup
          $('#popup').modal({
              remote: window.location.href,
          });
      }
  });
  </code></pre>
  
  <h3>Update</h3>
  
  <p>It seems that the issue is related to Chrome cache. I've partially fixed the error by appending a parameter to the remote URL of the popup content (e.g. <code>&amp;popup=1</code>). Now when the user visits an external site and comes back to the popup URL (pushed in history WITHOUT the parameter) Chrome reloads the popup page. If the users clicks on the back button once more and goes back to the homepage NOTHING HAPPENS, only the URL in the browser bar is updated... Can't find a way to reset the history state if the user visit an external site. Any help would be really appreciated</p>