bootstrap 3 close Modal when pushing browser back button

Question

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

<!--html, bootstrap 3.2.0-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-body">
    <p>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</p>
  </div>
  <div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>

<!--jquery-->
$('#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');
});

jsfiddle source

Answer 1

I know this question was asked in 2016 and now it's 2020 but still I am answering this for the sake of those people who might be searching it in the future (I am sure people will).

THIS IS ONE STOP SOLUTION TO THIS PROBLEM. Just copy and paste the below code to your site's .js file like custom.js or simply in the footer within $(document).ready(function(){}) like

$(document).ready(function(){
  $('div.modal').on('show.bs.modal', function() {
    var modal = this;
    var hash = modal.id;
    window.location.hash = hash;
    window.onhashchange = function() {
      if (!location.hash){
        $(modal).modal('hide');
      }
    }
  });
  $('div.modal').on('hidden.bs.modal', function() {
    var hash = this.id;
    history.replaceState('', document.title, window.location.pathname);
  });
  // when close button clicked simulate back
  $('div.modal button.close').on('click', function(){
    window.history.back();
  })
  // when esc pressed when modal open simulate back
  $('div.modal').keyup(function(e) {
    if (e.keyCode == 27){
      window.history.back();          
    }
  });
});

I have seen a lot of people searching a solution to this and now I am applying a full stop to the searches. This should be doing the exact job that we have all been waiting for "Closing bootstrap modal on click of back button on PC and Mobile and on back swipe gesture on mobile too (tested)". Feel free to customize it as per your needs. Happy day :)