Question

I created code to show jquery dialog on click of a div. Right now dialog pops at 5 points after the click position.

I am trying to display dialog from top line of li, it means the top border of li should be aligned with top border of dialog. Could some one point me to right logic to find out how to open dialog by getting li top border position.

  <div class="editionDetailAction">Action for Item 1</div>
<div class="editionDetailAction">Action for Item 2</div>
<div class="editionDetailAction">Action for Item 3</div>
<div class="editionDetailAction">Action for Item 4</div>



<div id="actionsPopup">
    <ul><li><a href="http://www.google.com">Add xyz</a></li></ul>
    <ul><li>Manage xyz</li></ul>
    <ul><li>Show xyz</li></ul>
</div>


.editionDetailAction { width: 130px; height: 30px; border: solid 1px #ddd; }
.actionsPopup .ui-dialog-titlebar { display:none; }



$(document).ready(function () {
    $('.editionDetailAction').click(function (e) {
        $("#actionsPopup").dialog("option", { position: [e.pageX+5, e.pageY+5] });
    });

    $("#actionsPopup").dialog({
            autoOpen: false,  
dialogClass: 'actionsPopup',
        maxWidth:100,
                    maxHeight: 100,
                    width: 100,
        height: 80,
resizable: false,


    });
    $(".editionDetailAction").bind("click", function () {
        $("#actionsPopup").dialog('open'); 
    });
    $(".actionsPopup").bind("mouseover", function () {
        $("#actionsPopup").dialog('open');
    }); $(".actionsPopup").bind("mouseleave", function () {
        $("#actionsPopup").dialog('close');
    });

    $(".editionDetailAction").bind("mouseleave", function () {
        $("#actionsPopup").dialog('close'); 
    });


   });

Answer 1

Try this:

$('.editionDetailAction').click(function() {
    var pos = $(this).position();
    $("#actionsPopup").dialog("option", {
        position: [pos.left+5, pos.top+5]
    });
});

See example: http://jsfiddle.net/Twisty/DZm9d/1/