How do I bind a jQuery Tools overlay event to an existing overlay?

Question

Say when the page loads, this code runs:

jQuery(document).ready(function($){
  $('#overlay').overlay( api: true );
});

How would I bind an event to it? I've tried:

$('#overlay').onBeforeLoad( function(){ alert('Hi'); });

$('#overlay').bind( 'onBeforeLoad', function(){ alert('Hi'); });

var api = $('#overlay').data('overlay');
api.onBeforeLoad(function(){ alert('Hi') });

When I do:

alert(api.getContent().attr('id'));

An alert pops up with '#overlay' inside.

When the overlay is open and I run:

alert(api.isOpened());

An alert pops up with 'false' inside.

Thanks in advance.

Answer 1

try

$('#overlay').overlay({ 
   onBeforeLoad: function(){ 
      alert('Hi');
   }
});

edit

I see, I think your problem starts here.

jQuery(document).ready(function($){
  $('#overlay').overlay( api: true );
});

should be this

jQuery(document).ready(function(){
      $('#overlay').overlay();
    });