Question

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

首先，ColorBox可以实现这样的行为吗？其次，我调查了window.onhashchange以及这个hashchange plugin，但我真的很想把一些与ColorBox插件一起工作的东西。我希望有人尝试或成功完成类似的事情，他们可能会对如何实现这一点有所了解。

Answer 1

是的，那可以做到。在这里，我假设您将为您的模态使用内联内容（隐藏）。链接将打开您的颜色框模式，但不是以正常方式将颜色框附加到链接，您只需使用带有查询参数的普通链接来定义要打开的模式：?cb=modal1。然后在docReady中，您只需在查询字符串中查找colorbox参数并打开相应的颜色框。这样，链接的位置无关紧要，并且无需将链接声明为颜色框链接。此示例使用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这个小提琴，但有一个免责声明：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();
  }
});

多数民众赞成：）

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

2 个答案: