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

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()了解＆＃34; my＆＃34;的选项

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

3 个答案: