Bootstrap 3.x: how to have url change upon clicking modal trigger?

Question

Using Bootstrap v3.3.5

I have a webpage that is using the url domain.com/companies

This is my trigger for the modal in that web

Answer 1

Use this on onclick event of the button that triggers the modal

onclick="window.location.hash = 'modal-add-company';"

And write following script code after bootstrap.js

<script>
if(window.location.hash.substr(1) == 'modal-add-company'){
    $('#modal-add-company').modal('show');
}
</script>

It should work.

Answer 2

Using jQuery this could be a viable solution

$(document).ready(function(){
   $(window.location.hash).modal('show');
   $('a[data-toggle="modal"]').click(function(){
      window.location.hash = $(this).attr('href');
   });
});

Assuming you have a trigger to close the modal like this:

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

You can add this below the code block above:

$('button[data-dismiss="modal"]').click(function(){
     var original = window.location.href.substr(0, window.location.href.indexOf('#'))
     history.replaceState({}, document.title, original);
 });

And assuming you want escape button to still be able to close the modal, and also change the url the whole code block would look like this:

    $(window.location.hash).modal('show');
    $('a[data-toggle="modal"]').click(function(){
        window.location.hash = $(this).attr('href');
    });

    function revertToOriginalURL() {
        var original = window.location.href.substr(0, window.location.href.indexOf('#'))
        history.replaceState({}, document.title, original);
    }

    $('.modal').on('hidden.bs.modal', function () {
        revertToOriginalURL();
    });

Credit to https://stackoverflow.com/a/13201843/80353 about how to use modal close event.