Dialog box positioning

I need to show the dialog where i clicked. If i click below link the dialog box must show below where i click the link the dialog box must appear in same position but in my code dialog box is showing at the top center of the page even ever we click the link.


$(".showTemplateDialog").dialog('option', 'position', ['center',e.pageY]);

Please help me for the get the dialog box at the mouse position .

I tried the with the top and left position also . but i didn't get the answer


try something like this

$(".showTemplateDialog").dialog('option', 'position', [$(this).offset.left,$(this).offset.top]);

have a look at dialog box positioning api for more info here: http://api.jqueryui.com/dialog/#option-position

UPDATE: Live Demo: http://jsfiddle.net/7b2RF/

Perhaps this might get you the idea how to do it:


<div id="one" class="divs"></div>
<div id="two" class="divs"></div>


.divs {
    float: left;
    height: 48px;
    width: 80px;
    border: 1px solid #55f;


    var $div = $('#two');
    var left = $div.offset().left;
    var top= $div.offset().top;
    $('<p>Some dialog</p>').dialog({position: [left + 20, top + 20]});

Here is the link to demo.

jQuery offset() returns element postion relative to document, while position() returns relative to offset parent.

Need Your Help

Best way to show Total Rows Grid.MVC List

c# jquery asp.net-mvc asp.net-mvc-5 grid.mvc

I have a Grid.MVC based list which allows me to create a sortable, filterable, paged list.

While loop in sql for top 10

sql-server sql-server-2008

Now, I am trying to get the top 10 data from the table through a loop.