Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Cause back button to close Bootstrap modal windows
$('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);
});
@bjesus

This comment has been minimized.

Copy link

bjesus commented Aug 30, 2014

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

@hubert17

This comment has been minimized.

Copy link

hubert17 commented Sep 9, 2014

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

@zdravimte

This comment has been minimized.

Copy link

zdravimte commented Nov 30, 2014

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)

@nhtahoe

This comment has been minimized.

Copy link

nhtahoe commented Mar 22, 2015

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');
  });
@nikopolv

This comment has been minimized.

Copy link

nikopolv commented Mar 27, 2015

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.

@thsl

This comment has been minimized.

Copy link

thsl commented Jun 18, 2015

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

@mismith

This comment has been minimized.

Copy link

mismith commented Aug 4, 2015

Thanks all!

@rioadrian

This comment has been minimized.

Copy link

rioadrian commented Apr 20, 2016

@nhtahoe thanks for solutions, it works for me 👍

@arnorhs

This comment has been minimized.

Copy link

arnorhs commented May 1, 2016

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.

@willamesoares

This comment has been minimized.

Copy link

willamesoares commented Dec 16, 2016

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.

@tdsymonds

This comment has been minimized.

Copy link

tdsymonds commented Mar 9, 2017

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.