jquery - 使用 Colorbox，如何为每个模式框创建浏览器历史记录状态？

Question

我正在使用ColorBox jQuery 插件，用于在我的网站周围创建用于不同目的的模态灯箱。在某些情况下，我们希望 ajax 模式框在浏览器中创建一个新的历史状态，这样如果用户单击“后退”按钮，它将关闭模式框并将它们带回底层 View 。

首先，ColorBox 可以实现这样的行为吗？其次，我研究了 window.onhashchange 以及这个 hashchange plugin ，但我真的很难将一些东西与 ColorBox 插件一起使用。我希望有人尝试或成功完成了类似的事情，并且可能对如何实现这一点有一些见解。

Answer 1

是的，这是可以做到的。在这里，我假设您将在模态中使用内联内容(隐藏)。链接将打开您的颜色框模态，但不是以正常方式将颜色框附加到链接，您只需使用普通链接和定义要打开哪个模态的查询参数:?cb=modal1。然后在 docReady 中，您只需在查询字符串中查找颜色框参数并打开相应的颜色框。这样，链接位于何处并不重要，并且无需将链接声明为颜色框链接。此示例使用 this answer 中的 getParameterByName 函数，但是当然您可以使用任何您喜欢的策略来提取查询参数。

$(document).ready(function() {
    var modal = getParameterByName("cb");

    if(modal != "") {
        $.colorbox({
            href: "#" + modal,
            inline: true
        });
    }
});

那么任何指向模式的链接都是:

<a href="yourpage?cb=modal1">Open modal 1</a>

查看该代码的完整代码 this jsfiddle .

更新:后退按钮关闭颜色框

阅读您的评论后，我更了解您想要实现的目标。因此，如果您只需要在用户单击后退按钮时关闭颜色框，而不是查询字符串，您可以在链接中使用 url 哈希值:

<a href="#colorbox-modal1">Open colorbox</a>

为了观察位置哈希的变化，您可以使用 this jQuery onhashchange plugin ，或类似的东西。然后在你的 docReady 中:

$(document).ready(function() {
    $(window).hashchange(function(){
            //gets the colorbox content id from the url hash
        var getCb = function() { return location.hash.match(/(#colorbox-.*)/) && RegExp.$1 },
            cb = getCb();

        if(cb) {
            $.colorbox({
                href: cb, 
                inline: true,
                //if closing with ESC key or overlay click, we
                //need to go back so that hashchange is fired
                //if the same colorbox is opened again
                onClosed: function() {
                    if(getCb()) {
                        history.go(-1);
                    }
                }
            });
        } else {
            $.colorbox.close();
        }
    })
});

Here's fiddle ，但有一个免责声明:当这段代码位于 fiddle 中时，IE8 和 IE9 会出现问题。不过，当我把它拿出来时，看起来还不错。