You're really very close.
Instead of constructing the actual overlay within the click function, we'll simply build it outside of the click and call the load event when we click the button.
$(".modal").overlay({
mask: {
color: 'silver',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: true,
load: false // will not load immediately, must be fired manually to see.
});
We can use the attribute selector
provided by jQuery to target elements with a rel
attribute matching #prompt
.
In the below, we'll call the instance of the overlay, and apply the load()
method, which will bring the modal to the front and make it visible
$('[rel=#prompt]').click(function(){
$('.modal').overlay().load()
});
Here's the stand alone demo provided by jQuery Tools concerning how to programatically trigger the load event for the modal dialog.