javascript - 打开一个带有新 URL 的模态弹出 div(比如 instagram)

Question

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

我已经使用 HTML5 history 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('');
    };

});