jQuery tools: How to close an overlay?

Question

I have an edit form that I'm displaying as an overlay using Jquery Tools.

On my object list view page, each object has <a href="#" class="edit_button">Edit</a>. All of these are attached to the same overlay form with:

        $(".edit_button[rel]").overlay({ top: '5px',
            fixed: false,

            mask: {
                color: '#ebecff',
                loadSpeed: 200,
                opacity: 0.9
            }
        });

The edit form overlay contains a cancel button:

<a href="#" class="cancel">Cancel</a>

How can I make this cancel button close the overlay? It seems that the only way I can get access to the Overlay API object is to use the selector that created it - in this case $('.edit').each() since I don't know which one triggered the overlay.

What I really want to do is something like:

$('.cancel').click(function(e){
    var target = e.originalTarget || e.srcElement;
    $(target).parent().parent().getOverlay().close();
});

but this doesn't work.

Is there any way I can close the overlay without doing:

$(".edit_button[rel]").each(function() {
    $(this).overlay().close();
});

?

Answer 1

You can easily add more closing elements inside the overlay simply by assigning the CSS class name "close" to them. These elements can be styled and positioned any way you like inside the overlay.

If you supply a value for the close configuration variable, the close element is not auto-generated and you need to define the closing element(s) yourself.

So if you put <a href="#" class="cancel close">Cancel</a> it should work.

Answer 2

To close the modal with JavaScript (automatically without clicking the close button):

$('#ID OF YOUR MODAL a.close').trigger("click");

or if you are in an iframe (like me), put parent. before the $.