R. Arnone R. Arnone - 4 months ago 14
jQuery Question

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
});

Answer

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 or in the new SO docs here

working link