Joining Modal Bootstrap with HTML5 History API

Question

There is a way to join the modal from Bootstrap (any version) with the API History?

The logic would look like this: Opening the modal URL in the navigation bar would change to exemplo.com/modal-aberto and when closing the modal the URL goes back to what it was.

I don’t have codes yet because it will be for some future projects.

Example: http://poracaso.ocponline.com.br/ ( Open any post from the list. )

Answer 1

I’ve never used Bootstrap before, but I tested the code and it worked fine:

$('#myModal').on('show.bs.modal', function() {
    window.history.pushState(null, null, "/modal-aberto");
});

$('#myModal').on('hidden.bs.modal', function() {
     window.history.replaceState(null, null, "/");
});

Remember to change the selector to select your modal.

Edited: I forgot to remove/modal-open when closing.

Answer 2

Well, I think setting an example would take a long time, but I’ve done something like this and I can help you with logic.

First you need any form of a server language, in the case of PHP you will have to use the .htaccess. With it you have to create a rule that redirects all URL’s to the main file, because if the user refreshes the page or enters the URL manually, will not be considered a pushState, so will redirect.

After that you have to create a function that reads the URL normally with the attributes of document.location. This function must read the URL and will be responsible for executing each action referring to the URL, like opening a modal for example.

After creating the function, it should be executed on page loading and on each URL exchange by pushState, for this you can call her in the events window.onload and window.onpopstate.

Observing:

1 - If the behavior is better, you can call the function as soon as the DOM is ready to load.

2 - The pushState which I was referring to is the function to change the URL if redirecting the page.`

The logic I used was this.