jQuery UI 对话框定位总是在右上角

Question

我正在尝试将对话框定位在锚标记的右侧，但没有成功。

我在jQuery UI dialog positioning 上查看了解决方案，但似乎都不起作用。

function openDialog(row_index) {
   var target = $('#note'+row_index);
    $("#dialog_content_"+row_index).dialog({ width:150 },
                                        { height:80 }).dialog('widget').position({
                                                                      my: 'left',
                                                                      at: 'right',
                                                                      of: target
                                                                     });
}

还有这个 HTML

<a id="note10" onclick="openDialog('10')" style="cursor:pointer">0010</a>

<div style="display:none" title="Title 10" id="dialog_content_10">Row 10</div>

Answer 1

OOpps - 我的兄弟正在使用我的电脑，我以他而不是我自己的身份提交了解决方案

懒人之道

//get reference to the element
var target = $('#note'+row_index);

//add an empty span at the very end of the element [only once]
if($('#note'+row_index+'_getPosition').length==0){ 
  $(target).after('<span id="note'+row_index+'_getPosition"></span>')
  }

// get position of newly inserted span
var position = $('#note'+row_index+'_getPosition').position();

//finally call the dialog using position as below
position : [position.left,position.top]

Answer 2

懒人之道

//get reference to the element
var target = $('#note'+row_index);

//add an empty span at the very end of the element [only once]
if($('#note'+row_index+'_getPosition').length==0){ 
    $(target).after('<span id="note'+row_index+'_getPosition"></span>')
    }

// get position of newly inserted span
var position = $('#note'+row_index+'_getPosition').position();

//finally call the dialog using position as below
position : [position.left,position.top]

Answer 3

将顶部指定添加到 my 和 at 属性似乎有效 - 假设您要与锚点的顶部和右侧对齐（在 Chrome 11.0.6 和 IE9 中测试）：

function openDialog(row_index) {
   var target = $('#note'+row_index);
    $("#dialog_content_"+row_index).dialog({ width:150 },
                                        { height:80 }).dialog('widget').position({
                                                                      my: 'left top',
                                                                      at: 'right top',
                                                                      of: target
                                                                     });
}

这里是jQuery page，用于测试不同的位置。

编辑：

这是a fiddle 显示它在右侧对齐...也许问题出在您的 CSS 或 html 中的其他地方？在小提琴中，我一直在使用 jQuery 1.5.1、jQuery UI 1.8.9 和基本主题 CSS 文件进行测试。