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

【问题标题】：How can I control where a jquery-ui Dialog displays?如何控制 jquery-ui 对话框的显示位置？
【发布时间】：2015-09-23 05:57:57
【问题描述】：

这就是我正在做的事情：

1) 添加一个“隐藏”CSS 类：

.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();

问题是这会导致对话框显示在页面中间；我希望对话框的 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 对话框），但点击什么也没做。

【问题讨论】：

api.jqueryui.com/dialog/#option-position
我看过但无法解码；这有点太抽象了，IMO - 我想要一个具体的例子。
这与流星无关，这里回答了鼠标位置定位：stackoverflow.com/questions/4552503/…
@B.ClayShannon 以后，如果您已经阅读过文档，指向它们将表明您至少做了一些研究。照原样看你的问题，看起来你只是尝试了.dialog()，发现它位于中心，然后在这里询问如何移动它而不做任何研究。

标签： jquery-ui jquery-ui-dialog

【解决方案1】：

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

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

捕获点击事件的 x/y 坐标
使用 javascript 将这些值设置为 div 的样式。

注意，我创建了一个跨越大部分网页的#outer div，以允许#dialog div 在这样的空间内移动。

HTML

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

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

【讨论】：