Support Middle Clicks on my Fancybox Lightbox

Suppose you have a lightbox, and you want to allow the user to middle-click, which would open a new tab, and the same content that shows-up in the lightbox on left-click is now on a standlone page (complete with header, sidebar, etc).

Anybody have a snippet or technique handy they can share?

Otherwise开发者_开发技巧 the technique I was going to try first was just to add a conventional href to the link, then add a click handler that cancels the default action on left click. I think this'll work but I'm not sure so honestly it was easier to pound out a question than to write it up and test it in the 14 browser/os combinations I have to support.

I finally found time to work this out and it was pretty easy:

This is how I made it work using jQuery & FancyBox:

Give your desired link a 'has-overlay' class and give it a custom attribute that will tell it what it should load in the overlay

<a href="/login"class="has-overlay" overlay="#loginform">Login</a>

Be sure you have the overlay code available (this is standard FancyBox stuff)

<div class="hidden" id="loginform"> <!-- Form Goes Here --> </div>

And put this snippet in your on ready event:

    $('.has-overlay').bind('click', function(e) {
        var overlay = $(this).attr('overlay');
        $('<a href="' + overlay + '"></a>').fancybox().trigger('click');
        return false;
    })

When a user left-clicks, this 'click' handler will be called. It will load the overlay and then return 'false' so the browser won't follow the href in the link.

When a user middle-clicks or right-clicks, the click handler doesn't fire, and it works as a normal link would.