使用Ajax，Pushstate和Popstate的Lightbox / modal类似于Instagram，Pinterest，Facebook

Question

我无法弄清楚如何在我的ajax灯箱中使用pushstate和popstate。我需要的是：

点击，打开灯箱并更新网址。在关闭的灯箱上，将网址更新为以前的状态。

在浏览器后退关闭灯箱并更新网址。在浏览器前面再次打开灯箱并更新网址。

示例：http://instagram.com/instagram

这是我到目前为止所做的：

function lightbox() {
    $('body').append('<div class="lightbox"/>');
}

function closeLightbox() {
    $('.lightbox').remove();
}

$(function() {

    $('.module').on('click', function(e) {

        var permalink = $(this).attr('href');

        lightbox();

        $.ajax({
            url: permalink,
            dataType: 'html',
            success: function(data) {
                var permalinkPage = $(data).find('.permalink-content');

                // Load content etc...
            }
        });

        history.pushState(null, null, permalink);

        $('.lightbox').on('click', function() {
            closeLightbox();
        });

        e.preventDefault();
    });

    $(window).on('popstate', function(e) {
        // Some function or if state?
    });

});

CodePen：http://codepen.io/anon/pen/eLpKr