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

Say when the page loads, this code runs:

jQu开发者_如何学编程ery(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.

---

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

---

Try this

var api = $("#overlay").overlay({api: true});  
api.load();

---

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