位置jquery对话框正好在点击事件下方

我试图在点击按钮下面放置一个对话框。以下内容：位置jquery对话框正好在点击事件下方

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

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

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

感谢您的帮助

来源

2013-03-12 GGio

使用偏移而不是活动页面，因为它们是鼠标的位置

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

来源

2013-03-12 21:02:42 jcubic

你快点，我给你说:) – kidwon 2013-03-12 21:03:27

谢谢你的工作，优于我的解决方案 – GGio 2013-03-12 21:05:18

我也用

e.clientX, e.clientY

更换

e.pageX, e.pageY

固定它

来源

2013-03-12 21:06:01 GGio

接受的答案不适合我。我使用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()为选择“我的”

来源

2017-01-24 16:01:09 Aba

位置jquery对话框正好在点击事件下方

回答

相关问题