1

I have a page with links that open a modal with id="modal-i (where i is any number) linked to an anchor tag with href="#modal-i". This works fine, you click the link and the associated modal will pop up, then when a link with href="#" is clicked the modal disappears.

I was wondering if there was a way to hide the hash location but keep the modal open? Basically keep everything working the same and just hide the hash in the URL.

I know that the only reason the modal will pop up is BECAUSE the hash is in the URL, but still wondering if it was possible, as it would make everything much cleaner.

I have searched for the answer but all I have found are questions asking how to remove the hash location with no page-reload.

Any help is greatly appreciated, thank you!

cdlane
  • 40,441
  • 5
  • 32
  • 81
Sam Chahine
  • 530
  • 1
  • 17
  • 52

1 Answers1

2

Well, sort of. You can remove it instantly.

Put this somewhere on your page:

<script>
document.body.onload = function() {updateurl()};
function updateurl(){

window.history.replaceState(window.location.hostname, "Sample Title", window.location.pathname);
}
</script>

All you need to do is change "Sample Title" to whatever you want.

Good luck

Trevor Clarke
  • 1,482
  • 1
  • 11
  • 20
  • Sorry I don't understand fully, what do pageTitle and the path represent ? – Sam Chahine Mar 26 '16 at 03:45
  • well the www.example.ca would be the domain... you dont put the /index.html or whatever there... the pageTitle is what you want to show up in the tab at the top.... and the /sample/path.html is where you put the path of your file so /index.html.... or are you hosting the file from your computer? – Trevor Clarke Mar 26 '16 at 03:48
  • I don't think I explained my problem properly. Okay so, I have a modal that opens according the hash, you can see an example here http://s.codepen.io/samirc/debug/bVLXPV – Sam Chahine Mar 26 '16 at 03:51
  • In my "web app" I take the user to the hash location in more ways than through an anchor tag, so I was wondering if I could hide the hash location with javascript, but still have the modal open and close, but with no # at the end of the url – Sam Chahine Mar 26 '16 at 03:52
  • @SamirChahine Okay I've edited my answer... just try that – Trevor Clarke Mar 26 '16 at 03:58
  • hang on one more sec – Trevor Clarke Mar 26 '16 at 04:00
  • @SamirChahine Try it now – Trevor Clarke Mar 26 '16 at 04:02
  • Thank you! I added a listener to my JS to check for any change in hash location and called updateURL() every time, it works perfectly! Thanks :) – Sam Chahine Mar 26 '16 at 04:13
  • @SamirChahine No Problem – Trevor Clarke Mar 26 '16 at 04:30