position jquery dialog right below the clicked event

Question

Im trying to position a dialog right below the clicked button. The following:

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

does not work properly when multiple buttons with that class name are present on the page. It shows the dialog below the last button instead of the clicked one. Any way of fixing this without me having to add ID attribute on each button?

Also when there is only 1 button the above works fine it shows below that button but it depends on which part of the button i click. If i click on top corner of the button the dialog overlaps that button little bit. How do i make it so that it does not overlap the clicked button?

thanks for your help

Answer 1

Use offset instead of event page since they are position of the mouse

$(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

I also fixed it by replacing

e.pageX, e.pageY

with

e.clientX, e.clientY

Answer 3

The accepted answer didn't work for me. I'm using jQuery 2.2.0 and 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');
});

see .position() for options for "my"