设置 jQuery UI 对话框相对于打开它的元素的位置答案

【问题标题】：Set jQuery UI dialog's position relative to the element that opened it设置 jQuery UI 对话框相对于打开它的元素的位置
【发布时间】：2014-11-21 03:04:14
【问题描述】：

我正在尝试将一个 jQueryUI 对话框放置在单击以触发其打开的元素上方。

我尝试了以下方法，但它不起作用。

$(function() {
    dialog = $( "#gridDialog" ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        "Close": function(event, ui) {
            dialog.dialog( "close" );
         }
    },
    open: function(event,ui){
        dialog.dialog( "option", "position", {at: "left top", of: event } );
    }
  });           
});

【问题讨论】：

我的错，显然传递给 open 函数的“事件”不适用于“位置”函数。我在打开对话框的“onclick”事件中将源对象设置为对话框的数据元素，在“open”函数中读取该数据元素并将其用作“position: target=$(”.gridDialog " ).data("target"); dialog.dialog("option", "position", {my:"left top", at: "left top", of: target });
如果你解决了一个难题，那么要么删除问题，要么自己回答问题，这样它就不会一直无人回答。

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

您的方法的问题是您试图将对话框定位在它自己的 open() 方法中，该方法接收 自定义 jQuery UI 事件对象，该对象没有 pageX和 pageY 属性，这是 jQuery UI position() 方法所期望的。

如果您在打开对话框之前在click 事件处理程序中设置对话框的位置，您可以简单地将this 或click 事件对象作为position() 选项的值个属性。

例如：

 $("#dialog").dialog({
   autoOpen: false
 });
 $(".box").click(function() {
   $("#dialog").dialog("option", "position", {
     at: "left top",
     of: this // this refers to the cliked element
   }).dialog("open");
 });

.box {
  width: 100px;
  height: 100px;
  background: dodgerblue;
}
#left {
  float: left;
}
#right {
  float: right;
}

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="left" class="box"></div>
<div id="right" class="box"></div>
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

【讨论】：

太棒了！谢谢TJ