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.