Get Top position of Dialog in JQuery

Question

Hello,

I am using the position option on JQuery dialog plugin. I am trying to figure out how to get just the "top" and "left" values out of this position object. However, I'm having difficulty figuring this out. Right now, I have a dialog defined as follows:

<a href="#" onclick="showHelp();">help</a>
<div id="helpDialog" title="Help">
  Some Help related text
</div>

<script type="text/javascript">
  $(document).ready(function () {
    $("#helpDialog").dialog({
      autoOpen: false,
      modal: true,
      buttons: {
        'OK': function() {
          $(this).dialog('close');
        }
      }
    });
  });

  function showHelp() {
    $("#helpDialog").dialog("open");
    var p = ("#helpDialog").dialog( "option", "position" );
    alert( /* what goes here? */);
  }
</script>

When this dialog opens, I want to display the "top" and "left" position of the dialog in an 'alert' window. But I can't figure it out. Can someone show me? Thanks!

Answer 1

You can use .offset() to get the offset of the contained <div> like this:

function showHelp() {
  var o = $("#helpDialog").dialog("open").offset();
  alert("Top: " + o.top + " Left : " + o.left);
}​

To get the offset of the overall dialog, you need to go up a level to the .ui-dialog it's contained in using .closest(), like this:

function showHelp() {
  var o = $("#helpDialog").dialog("open").closest('.ui-dialog').offset();
  alert("Top: " + o.top + " Left : " + o.left);
}​

The second version get the position of the top-left corner of the overall dialog, including title bar/border, the first gets the top-left corder of the div inside the dialog, not including this.