Search code examples
javascripthtmljquerycssoverlay

How to show overlay internal link on top of the current one when clicked?

I would like to make an onclick button which slides in another page link and changes the URL that covers up 80% of the website, while the previous page stays in the background. When close, the URL returns to the previous one.

I thought of ways to achieve that, but none of them changes the URL of the page, such as

  • embed iframe element
  • overlay a div element
  • make a pop up

Like this site, page slides in when clicked and changes the URL
https://area17.com/work

Solution

  • You can achieve this by any of the methods you specified above by adding the following Javascript code for changing the URL without reloading the page.

    window.history.pushState(state, pageTitle, theUrl);

    https://developer.mozilla.org/en-US/docs/Web/API/History/pushState