Any jquery modal box like this?

Question

Hello.

i want a jQuery modal box which is like the following shape, and also, it should opens near to the clicked button wherever it is.

Thank you so much.

Answer 1

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

Answer 2

The qTip jQuery plugin is pretty good.

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

Answer 3

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).