Create a jQuery modal box that appears beside the trigger action

I want a jQuery modal box that appears near or next to the button that triggers it. The box should appear in shape as well as in the following:

It should be height resizeable, so if the content 开发者_Python百科is long, the box will refit.

How can I do this?

The qTip jQuery plugin is pretty good.

http://craigsworks.com/projects/qtip/

I'm not sure if there is one exactly how you want but here is a list of a few that you may be able to modify slightly.

http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

This one in particular seems good

http://flowplayer.org/tools/tooltip.html

I don't think there's anything quite like what you're looking for out of the box. However, with a little customization and tweaking, you might be able to get pretty close to your goal.

To use a jQuery modal, simply design your modal div somewhere on your page (I usually do it at the very bottom) and give it an initial sytle of "display: none":

<div id="promotion_dialog" title="Choose a piece for promotion:" style="display: none;">
    <table id="my_table"> .... </table>
</div>

If you design the div correctly, you might be able to create the shape you're looking for.

Then when the button is clicked, call a Javascript function that displays and positions the div:

function openPromotionDialog() {
    $("#promotion_dialog").dialog({width: 350, height: 100, modal: true, zIndex: 10000});
    $("#promotion_dialog").dialog('open');
}

See the jQuery UI Dialog docs for more information. Providing a position parameter to the dialog() method should allow you to place it where you want (you'd need to examine the clicked button to get the positions).