Create a jQuery modal block that appears next to the trigger action

Question

I want the jQuery modal field to appear next to or next to the button that launches it. The box should look both in shape and in the following:

It must be changed in height, so if the content is long, the field will be updated.

How can i do this?

Answer 1

The qTip jQuery plugin is pretty good.

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

Answer 2

I'm not sure if there is something you need, but here is a list of several that you can change a bit.

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

This seems particularly good

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

Answer 3

I don’t think that something is very similar to what you are looking out of the box. However, with a little tweaking and tweaking, you might be able to get closer to your goal.

To use modal jQuery, just create your modal div somewhere on your page (I usually do this at the very bottom) and give it the initial sittle "display: none" :

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

If you create the div correctly, you can create the form you are looking for.

Then, when the button is pressed, call the Javascript function, which displays and positions the div:

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

See jQuery UI Dialog docs for more details. Providing the position parameter to the dialog() method should allow you to place it where you want (you will need to examine the click to get the position).