javascript - Displaying the JqueryUI dialog box at a given coordinates of the screen -

i devoloping calendar web app using fullcalendar.i wanted imitate google calendar display information event , delete button when clicked.i tried doing :

    element.bind('mousedown', function (e) {               if(e.which == 1){                 var xcord = e.clientx ;                 var ycord = e.clienty ;                 var x = 'left+' + xcord.tostring() ;                 var y = 'top+' + ycord.tostring() ;                 console.log(x) ;                 console.log(y) ;                 var  start = moment(event.start)                 var  end = moment(event.end)                   //the contents of dialog box start time , end time ...                   $('#info').html(start.format('ddd') + " " + start.format('mmm dd') + " " + start.format('hh:mm a') + " - " + end.format('hh:mm a')).css( 'font' , '15px arial, sans-serif');                  console.log(x+' '+y);                 //i expected box open @ given coordinates not doing !!!                 $('#dialog').dialog({                    position: { my: "center bottom", at: x+' '+y }                 });      //more code here ...  

however dialog box not opening @ given co-ordianates.it opens @ fixed position (slightly left of center ) on screen whereas want open above calendar event user has clicked.

is there wrong approach?

also there better method this. since if works , if scroll down calendar, dialog box no longer attached event even. fixed screen @ mentioned coordinates.

here part of html , css :

     <div id="dialog" title="basic dialog"  style="display: none;">             <p id = 'info'></p>            <button type="button" id = 'deleteevent'> delete</button>     </div> 

and css :

    <style type="text/css">     .ui-resizable-handle.ui-resizable-s::before, .ui-resizable-handle.ui-resizable-s::after {         content: "";         width: 0;         height: 0;         position: absolute;         left: 150px;         border-style: solid;         border-width: 10px;     }      .ui-resizable-handle.ui-resizable-s::before {         border-color: #aaa transparent transparent transparent;         top: 2px;     }      .ui-resizable-handle.ui-resizable-s::after {         border-color: #fff transparent transparent transparent;         top: 1px;     }      .ui-dialog {         overflow:visible;     }      .ui-dialog-title {         display:none;     }      .ui-dialog-titlebar {         background:transparent;         border:none;     }      .ui-dialog .ui-dialog-titlebar-close {         right:0;     } 

i using css, lets decide dialog generated , leave there when scroll, first in css add class: (make want it, use dialog in center of screen)

.fixed-dialog{   position: fixed;   top: 50px;   left: 50px; } 

then when create dialog, in modal options put line:

$("#name").load().dialog(                 {   //set options dialog here                         dialogclass: 'fixed-dialog'                 }); 

edit: if i'm understanding correctly want this:

$("#dialog").dialog("option", "position", {      at: "center bottom",      of: // refers cliked element    }).dialog('open');