How do I pass a an element position to jquery UI dialog

I have a list of elements and when clicking on each one I would like my jQueryUI dialog box to pop up next to the list element that was clicked on.

$( "#selector" ).dialog({ drag开发者_Python百科gable: false,
              width: 250,
              autoOpen: false,
              position: [e.pageX,e.pageY] });

$(".openDialog").click(function(e){
        console.log('I need the cooridnates x:'+e.pageX+' and y:'+e.pageY+'to be passed to the dialog box');
        $( "#selector" ).dialog("open");
});

I can get the coordinates I need, but I'm having trouble passing them to the dialog init.

Would love some insight into this.

Thanks in advance!

Since you want to show the dialog next to the clicked element, you should defer setting the dialog's position until that information becomes available, i.e. in your event handler:

$("#selector").dialog({
    draggable: false,
    width: 250,
    autoOpen: false
});

$(".openDialog").click(function(e) {
    $("#selector").dialog("option", "position", [e.pageX, e.pageY])
                  .dialog("open");
});

Before showing the dialog again, try:

$("#selector").dialog("option", "position", [e.pageX, e.pageY]);