Question

我想为模式弹出窗口复制Instagram行为。如果您转到IG页面（例如https://www.instagram.com/thehughjackman/），然后单击他的一张图片，则会弹出一个模式弹出窗口，其中图片会放大，并且URL立即更改为特定页面的URL（例如{{3} }。当您单击后退按钮时，模式框将关闭，并且URL重置为主页URL。我该如何复制这种行为？

我已经使用HTML5历史记录API通过javascript设置了网址，但仍然无法复制后退按钮的行为。这是我拥有的一些示例代码（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('');
    };

});

Answer 2

假设您使用的是Bootstrap模式，则可以在模式隐藏事件上添加一个函数，该函数会将URL恢复为原来的样子。像这样：

var stored_variable_of_previous_url;

$('#modal').on("hide.bs.modal", function (e) {
   history.replaceState(null, null, stored_variable_of_previous_url);
});

上面的replaceState方法可在地址栏中切换出URL，而无需请求任何资产，并且窗口将保留在同一页面上。这是因为replaceState不会操纵浏览器的历史记录，它只是替换地址栏中的当前URL。

然后将类似的内容添加到创建/打开模态的函数中：

stored_variable_of_previous_url = window.location.href;

用新的URL打开一个模式弹出div（例如instagram）

2 个答案: