CODEWITHSUNDEEP
javascriptjqueryurl
R. Arnone
R. Arnone

Reputation: 423

How to change the URL for an active popup?

I want to create a page to display portfolio content. Instead of having each item linking to a separate page I have a popup that overlays above the entire page to display the content.

Is it possible to change the url when a popup is active? I want to be able to link to a specific popup without having to find a specific item on the main page.

Here is the JSFIDDLE with my code.

  $('#info1').popup({
     color: 'black',
     opacity: 1,
     transition: '0.3s',
     scrolllock: true
  });

  $('#info2').popup({
     color: 'black',
     opacity: 1,
     transition: '0.3s',
     scrolllock: true
  });

Upvotes: 2

Views: 1248

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28563

Ok, so to make it work, I added these functions

$(".info1_open").click(function(){

    var popLink1 = "http://www.rachelgallen.com/popupworks.html";
    window.history.pushState(popLink1, "popLink", "http://www.rachelgallen.com/popup1.html");

});
$(".info1_close").click(function(){

    var popLink1 = "http://www.rachelgallen.com/popup1.html";
    window.history.pushState(popLink1, "popLink", "http://www.rachelgallen.com/popupworks.html");

});

$(".info2_open").click(function(){

    var popLink2 = "http://www.rachelgallen.com/popupworks.html";
    window.history.pushState(popLink2, "popLink", "http://www.rachelgallen.com/popup2.html");

});
$(".info2_close").click(function(){

    var popLink2 = "http://www.rachelgallen.com/popup2.html";
    window.history.pushState(popLink2, "popLink", "http://www.rachelgallen.com/popupworks.html");

});

Note that its's important to revert back to the original url on close.

Another thing I noticed is that it didn't work if i tried it from just rachelgallen.com (without the www. before it) so ensure you type in your preferred domain in the link

You can read more about the pushState (which is a new HTML5 thing) here

working link

Upvotes: 1

Related Questions