Question

这就是我正在做的事情：

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" ).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”后会看到“外部”和“对话框”。）

......它不起作用;我看到两个div（外部的一个带有绿色边框，其中有div对话框），但点击什么也没做。

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

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对话框显示的位置？

更新

更新2

1 个答案: