Cause back button to close Bootstrap modal windows

backbutton close bootstrap modal

$('div.modal').on('show', function() {
	var modal = this;
	var hash = modal.id;
	window.location.hash = hash;
	window.onhashchange = function() {
		if (!location.hash){
			$(modal).modal('hide');
		}
	}
});

$('div.modal').on('hide', function() {
	var hash = this.id;
	history.pushState('', document.title, window.location.pathname);
});

works with Bootstrap 3 by changing "show" to "show.bs.modal" and "hide" to "hidden.bs.modal"

It works on me by changing only the "show" to "show.bs.modal"
Retain "hide" as "hide"
(Bootsrap 3.2.0)

after pressing the back button and making the modal dissappear (which works great), is there a way how to prevent the possibility of going forward again? (the URL with the hash = modalDiv is still there in the history tracklist)

This seemed to work for me:

 $(".modal").on("shown.bs.modal", function()  { // any time a modal is shown
    var urlReplace = "#" + $(this).attr('id'); // make the hash the id of the modal shown
    history.pushState(null, null, urlReplace); // push state that hash into the url
  });

  // If a pushstate has previously happened and the back button is clicked, hide any modals.
  $(window).on('popstate', function() { 
    $(".modal").modal('hide');
  });

Can't get this to trigger the event "shown.bs.modal". What could be wrong. I'm using Bootstrap v3.3.2.

e: show.bs.modal works.

The nhtahoe code works fine! I've tested in my phone too, and works too!

Thanks all!

@nhtahoe thanks for solutions, it works for me 👍

I don't believe this solution accounts for the user closing the modal without eg. pressing back. if you click a dismiss button or press escape etc, the modal will get hidden but the url has not updated.

There is actually a bug with these solutions and I'm currently struggling to debug in order to find the problem. When you click to open the modal multiple times and then close it without using the back button, the history keeps track of each state that is being added by pushState but is not being popped. With that you would have to click multiple times in the back button to really go back to the previous page after you close the modal.

Thanks for this, was really helpful.

However, I've managed to solve the problem that @willamesoares has mentioned in my fork:

https://gist.github.com/tdsymonds/23917215f591a9e1442a38783c77f0f0

Hope this helps too!

This seemed to work for me:

 $(".modal").on("shown.bs.modal", function()  { // any time a modal is shown
    var urlReplace = "#" + $(this).attr('id'); // make the hash the id of the modal shown
    history.pushState(null, null, urlReplace); // push state that hash into the url
  });

  // If a pushstate has previously happened and the back button is clicked, hide any modals.
  $(window).on('popstate', function() { 
    $(".modal").modal('hide');
  });

It works fine for me too but I had the problem with 2 or more visible modals in same page, when I wanted to close the top modal, all modal get close, so I changed a little bit the $(window).on('popstate', function() function and fully works.
This is my first conttribution, hope this helps.

  $(window).on('popstate', function() { 
     //$(".modal").modal('hide');
     if ($(".modal:visible").length){                                 // validate that there are visible modal
         $(".modal").eq($(".modal:visible").length-1).modal('hide');  // hide only the last model opened
     }
  });```

Please help me
And here is my modal it is not working bootstrap 3.2.0

### <a href="" data-toggle="modal" data-target="#exampleModal">Mô Tả MP3</a>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog<?php if(mobile()){echo'-centered';}?> modla-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">ஜ۩۞۩ஜ Description ஜ۩۞۩ஜ</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
	  description...........
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
$('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('hide', function() {
	var hash = this.id;
	history.pushState('', document.title, window.location.pathname);
 });
</script>