Question

我想在单击按钮时在按钮旁边显示一个jquery对话框。

我有：

<input type="button" name="test" value="i" 
onclick="$('<div></div>').html('test message').dialog(
{title: 'Test Dialog',modal: false, width: 200, height:140, resizable:false});" 
/>

我不认为我可以在json定义中进行函数调用吗？

我可以使用jquery（来自事件）获取鼠标的位置，我很乐意将其用作显示位置或按钮的位置。

欢迎任何建议。

Answer 1

首先，如果可能的话，在标记之外执行此操作，则更容易，因此：

<input type="button" name="test" value="i" 
onclick="$('<div></div>').html('test message').dialog(
{title: 'Test Dialog',modal: false, width: 200, height:140, resizable:false});" 
/>

将是：

<input type="button" name="test" value="i" />

使用此脚本：

$(function() {
  $("input[name='test']").click(function() {
    $('<div></div>').html('test message')
       .dialog({title: 'Test Dialog',
                modal: false, 
                width: 200, 
                height:140, 
                resizable:false});
  });
});

然后我们可以添加定位，比如你想要它在按钮的右边，然后使用.offset()来获取按钮的位置，然后添加它.outerWidth()以使其显示在右侧，就像这样：

$(function() {
  $("input[name='test']").click(function() {
    var pos = $(this).offset(),
        top = pos.top - $(document).scrollTop(); //minus amount scrolled down
    $('<div></div>').html('test message')
       .dialog({title: 'Test Dialog',
                modal: false, 
                width: 200, 
                height:140, 
                position: [pos.left + $(this).width(), top],
                resizable:false});
  });
});

You can try an example here，它具有我上面提到的确切标记和代码，以及here's a test version to ensure it works with scrolling。

我如何在动态位置显示jqueryUI

1 个答案: