Add to URL when modal is visible

Design help Custom code
1

On the site I’m creating I would like to click a button which makes a modal visible. When that button is clicked I would like the url to have a parameter added to it. That way, someone can copy and share the url with the modal open. Does anyone know how to do this?

I tried to use this code, which works to show/hide the modal and when someone enters the url with “#show-modal” added, it does in fact load the page with it visible. But if you just click the “modal-link” element to open that modal, the url does not update with that parameter. So the issue is a page visitor does not see the extra parameter when they copy the url.

<script type="text/javascript">

$(document).ready(function () {
  $('.modal-link').click(function () {
    $('.modal-background').fadeIn();
    return false;
  });
 
  $('.close-modal').click(function () {
    $('.modal-background').fadeOut();
    return false;
  });
  if (location.hash == '#show-modal') {
    $('.modal-background').fadeIn();
  }
});

</script>