如何控制 jquery-ui 对话框的显示位置？

Question

这是我正在做的事情：

1) 添加一个"hide" CSS class:

.hide {
  visibility: hidden;
  display: none;
}

2) 在Dialog应该显示的地方添加一些HTML，默认隐藏，如：

  <div class="hide" id="postTSec4" name="postTSec4">
    <h2>Post-Travel Bottom</h2>
    <img id="imgPostTravelBottom" name="imgPostTravelBottom" src="images/4_PTE_Bottom_Jig.png" alt="post Travel image" height="275" width="350">
  </div>
  <div class="hide" 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>

3) 响应某些事件，取消隐藏 div 并在其上调用 dialog()，例如：

$( "#dialog" ).removeClass('hide');
$( "#dialog" ).dialog();

问题是这会导致对话框显示在页面中间；我希望对话框在 cursor/pointer/finger.

的尖端显示其 NW 角

那么如何控制对话框出现的位置？

更新

我使用链接到的、假定的答案代码作为基础，但不，它在我的情况下不太有效。

更新 2

使用此代码（改编自 meteorBuzz 的回答）：

CSS

.outer {
    width: 100%;
    height: 700px;
    border: 2px green solid;
    padding: 10px;
}
#dialog {
    height: 100px;
    max-width: 100px;
    border: 3px black solid;
    padding: 5px;
    z-index: 100;
}

HTML:

<template name="postTravelSection5">
<div class="outer hide" id="postTSec5" name="postTSec5">
    <div id="dialog" name="dialog" title="Basic dialog">
        <p>This is dialog content area...</p>
    </div>
</div>
</template>

JavaScript:

Template.postTravelSection5.events({
    'click #postTSec5': function(event) { 
      var x = event.pageX;
      var y = event.pageY;

      $("#dialog")
        .offset({
          'left': x,
          'top': y
        });
    }
  });

  Template.postTravel.events({
    'click #imgPostTravel': function() {
      . . .
      $('#postTSec5').removeClass('hide');
    }
  });

（点击"imgPostTravel"后可以看到"outer"和"dialog"）。

...它不起作用；我看到了两个 div（外面有绿色边框，里面有 div 对话框），但是点击没有任何反应。

Answer 1

您可以完全控制 div 行为，只需创建您自己的行为模型，而不是针对此特定问题使用 jquery-ui。此外，您可以使对话框看起来独一无二，而不必覆盖 jquery-ui 默认样式和定位。

您可以分两步将 div 移动到点击事件发生的位置：

捕获x/y点击事件的坐标
使用 javascript.

注意，我创建了一个跨越大部分网页的 #outer div 以允许 #dialog div 在这样的 [=44] 中移动=].

HTML

<template name="postTravelSection4">
<div class="outer">
    <div id="dialog" title="Basic dialog">
        <p>This is dialog content area...</p>
    </div>
</div>
</template>

JS

Template.postTravelSection4.events({
  'click': function(event) { // you may add which element fires this function when you click it.
    var x = event.pageX; // x coordinates 
    var y = event.pageY; // y coordinates 

    $( "#dialog" )
      .offset({
        'left': x,
        'top': y
      });
    }

  });
}

CSS

.outer {
    width: 100%;
    height: 700px;
    border: 2px green solid;
    padding: 10px;
}

#dialog {
    height: 100px;
    max-width: 100px;
    border: 3px black solid;
    padding: 5px;
    z-index: 100; // incase of overlaps of divs, this one will remain on top
}
// create your hide/show classes to display and remove the div from display in the way you wish

如何控制 jquery-ui 对话框的显示位置？

How can I control where a jquery-ui Dialog displays?

jquery-ui

jquery-ui-dialog

更新

更新 2