2

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.

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.

Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131

2 Answers2

2

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>

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

Update: Back button closes colorbox

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>

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();
        }
    })
});

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.

Community
  • 1
  • 1
uɥƃnɐʌuop
  • 14,022
  • 5
  • 58
  • 61
  • This looks promising for those using anchor links to invoke Colorbox. Unfortunately, I am not. I'm attaching Colorbox to the click event of an entire table row. +1 though, because this would work in an other situation. – Michael Irigoyen Nov 21 '11 at 18:51
  • Ah, I see, but then how did you intend to be able to prevent the page from leaving when clicking back? I didn't think that was possible without the "Leave this page?" native dialog. Or did you mean that you will have a back button in the colorbox? Because if that's the case, I have done that before, too. If you are still looking for an answer I can update this answer with the solution I used. – uɥƃnɐʌuop Nov 21 '11 at 19:00
  • If load my initial page, it will show a table full of rows with different "tickets." Click on a row opens Colorbox to show the ticket information. The only way to close the modal box is by clicking a close button in the top right corner, but I'd like to allow users to click the browser's Back button to close it as well, essentially bringing them "back" to the table view. That's really the behavior I'm trying to accomplish. – Michael Irigoyen Nov 21 '11 at 19:21
1

Well, i found the answer for the questioner (if anyone is still interested). You will need the haschange-plugin the questioner mentioned above. I use the following solution on a DRUPAL-site with the colorbox-plugin.

Here we go:

// 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();
  }
});

Thats it :)

Fab Ulous
  • 79
  • 8