使用 Colorbox，我如何为每个模态框创建浏览器历史状态？

Question

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

首先，这样的行为是否可能与 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查看该代码的完整代码。

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

阅读您的 cmets 后，我更了解您想要实现的目标。因此，如果您只需要在用户单击后退按钮时关闭颜色框，而不是查询字符串，您可以在链接中使用 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 提琴，但带有免责声明：IE8 和 IE9 在此代码位于提琴内时存在问题。不过，我把它拿出来时似乎还可以。

Answer 2

好吧，我找到了提问者的答案（如果还有人感兴趣的话）。您将需要上面提到的提问者的 haschange-plugin。我在带有 colorbox-plugin 的 DRUPAL 站点上使用以下解决方案。

我们开始吧：

// When colorbox completed, add the hash "#colorbox"
$(document).bind('cbox_complete', function () { 
  window.location.hash = '#colorbox';
});

$(window).hashchange(function(){
  // Return true if hash was found
  var getCb = function() { return location.hash.match('#colorbox')},
  cb = getCb();
  // If there is no hash (which happens when using the browsers back-button), close the colorbox
  if(!cb) {
    $.colorbox.close();
  }
});  

就是这样:)