Question

I am using jquery colorbox for confirmation window before delete users. But user click on this link befire page loding, it will take to new page(not popup). can you help me

<a class="delete" href="member/remove/{$result['user_id']}">Remove</a>

$(document).ready(function() {
    $('.delete').colorbox({innerWidth:"480px", innerHeight:"170px", iframe:true});

});

Answer 1

I’d use the following trick to avoid early (i.e. before $(document).ready()) clicks:

In your anchors, use the rel attribute instead of href for storing the target url, like this:

<a class="delete" href="#" rel="member/remove/{$result['user_id']}">Remove</a>

Pass a custom “href” function to colorbox, that will return the anchor’s rel attribute instead of the href value:

$('.delete').colorbox({
    innerWidth:"480px",
    innerHeight:"170px",
    iframe:true,
    href: function() {
        return $.colorbox.element().attr('rel');
    }
});

This will result in kind-of-disabled links before the colorbox is loaded. I.e. if your users click too early on these links, no action will be taken.

Is this what you needed?

Working example here: http://jsfiddle.net/ce7a4/2/
(Colorbox will be bound to the link only 5 seconds after page load. Clicking the link before will result in no visible action)