5

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

?

bakkal
  • 54,350
  • 12
  • 131
  • 107
Roger
  • 4,911
  • 6
  • 29
  • 26

3 Answers3

2

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.

Matt Williamson
  • 39,165
  • 10
  • 64
  • 72
  • what do you do if this content is loaded in through ajax. i have html being loaded into the overlay and in that html there is a button to close. I put a class of close and it does not work. ANy thoughts? – Scoota P Dec 13 '11 at 20:50
1

Expanding on what Kras provided. If you only have one Overlay open at once (which logically you will do) then you can use this more generic approach perhaps:

  $('a.close').trigger('click');

I hope this helps!

Nabster
  • 95
  • 7
1

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 $.

Kras
  • 11
  • 1