javascript - 使用新 URL 打开模式弹出 div(如 Instagram)

Question

我想复制模式弹出窗口的 Instagram 行为。如果您转到一个 IG 页面(例如 https://www.instagram.com/thehughjackman/ )，然后单击他的一张照片，则会出现一个模式弹出窗口，其中放大了图片，并且 URL 立即更改为特定页面 URL(例如 https://www.instagram.com/p/Bwedsp-HEF3/ )。当您单击后退按钮时，模式框将关闭，并且 URL 重置为主页 URL。我怎样才能复制这种行为？

我已经使用 HTML5 历史记录 API 通过 JavaScript 设置 URL，但仍然无法复制后退按钮行为。这是我的一些示例代码(CSS 并不完美，但或多或​​少就是这个想法)-

JAVASCRIPT:

function ChangeUrl(title, url) {
    if (typeof (history.pushState) != "undefined") {
        var obj = { Title: title, Url: url };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        alert("Browser does not support HTML5.");
    }
}

$(document).ready(function() {
    $("#test").click(function() {
        ChangeUrl('', '?q=abcd');
        $("#modal").html(`<img id="big" src="https://cdn.pixabay.com/photo/2014/04/14/20/11/japanese-cherry-trees-324175_960_720.jpg">`).show();
    });
});

CSS:

#modal {
    display: none;
    width: 500px;
    margin: 20px auto;
    border: 2px solid #777;
}

#thumb {
    max-width: 200px;
    max-height: 200px;
    border: 1px solid #555;
}

#big {
    width: 100%;
}

HTML:

<a href="#" id="test"><img id="thumb" src="https://cdn.pixabay.com/photo/2014/04/14/20/11/japanese-cherry-trees-324175_960_720.jpg"></a>

<div id="modal"></div>

Answer 1

我建议监听 popState 来处理后退按钮，如下所示

function ChangeUrl(title, url) {
    if (typeof (history.pushState) != "undefined") {
        var obj = { Title: title, Url: url };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        alert("Browser does not support HTML5.");
    }
}

$(document).ready(function() {
    $("#test").click(function() {
        ChangeUrl('', '?q=abcd');
        $("#modal").html(`<img id="big" src="https://cdn.pixabay.com/photo/2014/04/14/20/11/japanese-cherry-trees-324175_960_720.jpg">`).show();
    });
    window.onpopstate = function(event) {
      console.log('on popstate');
      $('#modal').html('');
    };

});