使用Colorbox，如何为每个模式框创建浏览器历史记录状态? [英] Using Colorbox, how can I create browser history states for each modal box?

问题描述

我正在使用 ColorBox jQuery插件在我的网站上创建用于不同目的的模态灯箱.在某些情况下，我们希望ajax模式框在浏览器中创建一个新的历史记录状态，以便如果我单击后退"按钮，它将关闭模式框并将其带回到基础视图.

I'm using the ColorBox jQuery plugin to create modal lightboxes for different purposes around my site. In some cases, we'd like the ajax modal box to create a new history state in the browser so that if I user clicks the Back button, it will close the modal box and bring them back to the underlying view.

首先，ColorBox可能会发生这种情况吗?其次，我研究了window.onhashchange和这个 hashchange插件，但是我真的很难将某些东西与ColorBox插件配合使用.我希望有人尝试或成功完成了一些类似的事情，并且可能对此有所了解.

Firstly, is behavior like this possible with ColorBox? Second, I've looked into window.onhashchange and also this hashchange plugin, but I'm really struggling to put something working together with the ColorBox plugin. I'm hoping someone has attempted or successfully accomplished something similar who may have some insight on how this may be accomplished.

推荐答案

是的，可以做到.在这里，我假设您将对模态使用内联内容(隐藏).链接将打开您的颜色框模态，但您没有使用常规方法将颜色框附加到链接，而是仅使用带有查询参数的普通链接来定义要打开的模态:?cb=modal1.然后在docReady中，您只需在查询字符串中查找colorbox参数并打开相应的colorbox.这样，您的链接在哪里都没有关系，也无需将链接声明为颜色框链接.本示例使用此答案中的getParameterByName函数，但是当然，您可以使用任何喜欢的策略来提取查询参数.

Yeah, that can be done. Here I am assuming you are going to use inline content (hidden) for your modals. Links will open your colorbox modals, but rather than attaching the colorbox to the link in the normal way, you just use normal links with a query parameter defining which modal to open: ?cb=modal1. Then in your docReady you just look for colorbox parameters in the query string and open the appropriate colorbox. This way, it doesn't matter where your link is, and there's no need to declare the links as a colorbox link. This example uses the getParameterByName function in this answer, but of course you can use any strategy you like to pull the query params.

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

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

那么到模式的任何链接将是:

Then any link to a modal would be:

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

在此jsfiddle 中查看该代码的完整代码.

Check out the full code for that one at this jsfiddle.

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

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

After reading your comments, I understand better what you want to achieve. So if you only need to close the colorbox when user clicks the back button, instead of query strings you could use url hashes in your links:

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

为了监视位置哈希值的变化，您可以使用此jQuery onhashchange插件或类似的内容.然后在您的docReady中:

In order to watch for changes in the location hash, you could use this jQuery onhashchange plugin, or something similar. And then in your 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();
        }
    })
});

这里是的提琴，但有一个免责声明:IE8和IE9有问题在小提琴里面的这段代码.但是，当我将其取出时似乎还可以.

Here's the fiddle for that, but with a disclaimer: IE8 and IE9 have problems with this code while it's inside a fiddle. Seems ok when I take it out, though.

这篇关于使用Colorbox，如何为每个模式框创建浏览器历史记录状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！