创建一个出现在触发器操作旁边的jQuery模式框

Question

我想要一个jQuery模式框出现在触发它的按钮附近或旁边。该框应显示在形状和以下内容中：

它应该是高度可调整大小，因此如果内容很长，则该框将重新调整。

我该怎么做？

Answer 1

qTip jQuery插件非常好用。

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

Answer 2

我不确定是否有一个你想要的确切方法，但这里有一些你可以稍微修改的清单。

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

这个特别好看

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

Answer 3

我认为没有任何东西可以像你想要的那样开箱即用。但是，通过一些自定义和调整，您可能会非常接近目标。

要使用jQuery模式，只需在页面的某处设计模态div（我通常在最底部进行设计）并给它一个"display: none"的初始信号：

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

如果你正确设计div，你可能能够创建你正在寻找的形状。

然后单击该按钮时，调用显示和定位div的Javascript函数：

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

有关详细信息，请参阅jQuery UI Dialog docs。向dialog()方法提供position参数应该允许您将其放置在您想要的位置（您需要检查点击的按钮以获取位置）。