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 个按钮时，上面的效果很好，它显示在该按钮下方，但这取决于我单击按钮的哪一部分。如果我单击按钮的上 Angular ，对话框会与该按钮重叠一点。我该怎么做才能使其不与单击的按钮重叠？

谢谢你的帮助

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