title: bootstrap 3 close Modal when pushing browser back button
body: <p>I just want to create a modal page which behaves the same either pushing the browser back button or the close button inside the modal, using bootstrap 3. I found a script which does that, but there is a problem. let's say I start off with a google.com, go to this modal page, then push the "Modal!" button, then push the browser back button, it will close the modal, if I push the back button again, it will take me back to google.com (all is good). But this time, if I open the modal page and close the modal using the "close" button instead. But now, I would have to push the back button twice to go back to google.com. If I open and close the modal with the close button inside of modal for like 10x. I found that I have to push the browser back button 10 more times to get back to google.com page. How to fix this problem? TIA</p>
  
  <pre><code>&lt;!--html, bootstrap 3.2.0--&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog"&gt;
  &lt;div class="modal-dialog"&gt;
  &lt;div class="modal-content"&gt;
    &lt;div class="modal-body"&gt;
      &lt;p&gt;If you press the web browser's back button not the modal's "close" button, the modal will close and the hash "#myModal" will be removed for the URL&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;&lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!--jquery--&gt;
  $('#myModal').on('show.bs.modal', function (e) {
      window.history.pushState('forward', null, '#modal');
  });
  
  $('#myModal').on('hide.bs.modal', function (e) {
      //pop the forward state to go back to original state before pushing the "Modal!" button
  });
  
  $(window).on('popstate', function () {
      $('#myModal').modal('hide');
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/bb20gvx9/" rel="noreferrer">jsfiddle source</a></p>