Help Needed - Inline Modal Add To Cart Window

[Zest]

Hi all, I want to have a Inline popup window open when I press the add to cart button, to replace the bounce page, with a message saying product name etc, and a continue shopping button or checkout.

I've removed the add to cart bounce page by following the details in the advanced guide page 131 and have the code below that works via clicking the "Buy" href link.

The problem is I want this to run when you click the <input> Add to cart button. Does anybody know how to run this code when the button is selected without using the link so the form details are posted as well or does anyone have any other alternatives.

Thanks for your help
Antony

=================================================

<a href="#?w=500" rel="<actinic:variable name="ProductID" />" class="poplight">Buy</a>

<div id="<actinic:variable name="ProductID" />" class="popup_block">
<h2>Thank You</h2>
<p><actinic:variable name="ProductName" /></p>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {


//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size

//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value

//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;

//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies

return false;
});

//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});

});
</script>