在点击的事件正下方定位jquery对话框

Question

我试图在单击按钮的正下方放置一个对话框.下列:

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

当页面上出现具有该类名称的多个按钮时,它无法正常工作.它显示最后一个按钮下方的对话框,而不是单击的按钮.没有我必须在每个按钮上添加ID属性的任何方法来解决这个问题？

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

谢谢你的帮助

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');
});