javascript - 将 jquery 对话框定位在单击事件的正下方

Question

我试图在单击的按钮正下方放置一个对话框。以下：

$(document).on('click', '.my_buttons', function(e){
    $('#my_dialog').dialog("option", "position", [e.pageX, e.pageY]);
    $('#my_dialog').dialog('open');
});

当页面上存在具有该类名称的多个按钮时，无法正常工作。它在最后一个按钮下方显示对话框，而不是单击的那个。有什么方法可以解决这个问题，而不必在每个按钮上添加 ID 属性？

此外，当只有 1 个按钮时，上面的工作正常，它显示在该按钮下方，但这取决于我单击按钮的哪个部分。如果我单击按钮的顶角，对话框会与该按钮重叠一点。我如何使它不与单击的按钮重叠？

感谢您的帮助

Answer 1

使用偏移量而不是事件页面，因为它们是鼠标的位置

$(document).on('click', '.my_buttons', function(e){
    var offest = $(this).offset();
    var height = $(this).height();
    $('#my_dialog').dialog("option", "position", [offest.left, offest.top+height]);
    $('#my_dialog').dialog('open');
});

Answer 2

我也通过更换来修复它

e.pageX, e.pageY

和

e.clientX, e.clientY

Answer 3

接受的答案对我不起作用。我正在使用 jQuery 2.2.0 和 jQuery UI - v1.11.4

$(document).on('click', '.my_buttons', function(e){
    $('#my_dialog').dialog("option", "position", {my: "center top+5", of: e});
    $('#my_dialog').dialog('open');
});

有关“我的”选项，请参见.position()