在JQuery中获得Dialog的最高位置

时间:2010-06-28 13:55:52

标签: jquery

我正在使用position option on JQuery dialog plugin。我试图弄清楚如何从这个位置对象中获得“顶部”和“左”值。但是,我很难搞清楚这一点。现在,我有一个如下定义的对话框:

<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>

当此对话框打开时,我想在“警报”窗口中显示对话框的“顶部”和“左侧”位置。但我无法弄明白。有人能告诉我吗?谢谢!

1 个答案:

答案 0 :(得分:6)

您可以使用.offset()来获取包含 <div>的偏移量,如下所示:

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

要获得整个对话框的偏移量,您需要将级别提升到使用.closest()时所包含的.ui-dialog级别,如下所示:

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

第二个版本获取整个对话框左上角的位置,包括标题栏/边框,第一个获取对话框内div的左上角,不包括此内容。