How to position dialog where the hyperlink is clicked???

How to position dialog where the hyperlink is clicked???

The position property makes the dialog to appear in some fixed position. I want the dialog to be opened in the same position where the hyperlink View Profile is clicked.

Please help me with this code, Thank You in advance
<td style="background-color: rgb(194, 214, 155);"><span style="color:#000000">Mrs. Shilpa S</span></td>
<td style="background-color: rgb(194, 214, 155);"><span style="color:#000000">Assistant Professor</span></td>
<td style="background-color: rgb(194, 214, 155);"><span style="color:#000000">B.Sc,M.Sc, (Ph.D)</span></td>
<td style="background-color:rgb(194, 214, 155); text-align:center">
<div class="dialog"><p><span style="font-size:18px"><strong>Mrs. </strong><strong>Shilpa S</strong></span></p>


</div>
<span style="color:#000000"><a class="opener" href="#" onclick="function(e)">View Profile</a></span></td>

</tr>


JS code is
$(function(e) {
$( '.dialog').dialog({
       width:450,
height:350,
position:['middle',20],
modal:true,
scrolling: null,
autoOpen: false,
dialogClass:'bstyle',
show: {
effect: "fade",
duration: 1000,
},
hide: {
effect: "explode",
duration: 1000
}
});
$('.opener').click(function(e) {
e.preventDefault();
$( '.dialog').dialog( "open" );
    $("#ui-dialog-title-dialog").hide();
    $(".ui-dialog-titlebar").removeClass('ui-widget-header');

});