JQuery 对话框标题不跟随鼠标移动

Question

当光标位于图像的某些部分时，我使用热点/图像映射显示不同的弹出框。根据这个先前回答的问题，我让一切运作良好。但是，当我尝试将对话框从窗口中心弹出的位置更改为跟随光标时，对话框的文本会移动，而标题和标题/内容框本身保持居中。

我尝试更改jquery.ui css中的位置名称，将".box"更改为其他类，并且确实设法使用以下方法移动标题框：

$(this).dialog({modal:false, resizable:false,autoOpen:false, position:"left"});

或其他位置变化，但它仍然没有跟随光标。

出了什么问题？

$(function() {
$('.box').each(function(k, v) {
var box =
$(this).dialog({
modal: false,
resizable: false,
autoOpen: false,
});
$(this).parent().find('.ui-dialog-titlebar-close').hide();
$("#elem" + k)
.mouseover(function() {
box.dialog("open");
})
.mouseout(function() {
box.dialog("close");
})
.mousemove(function() {
box.position({
my: "left+3 bottom-3",
of: event
});
})
});
});

<link href="https://code.jquery.com/ui/1.12.1/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="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<section class="legacy">
<h3>background</h3>
<img src="https://images.pexels.com/photos/433539/pexels-photo-433539.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="background" usemap="#image" id="background" />
<map name="image">
<area shape="poly" coords="580,637,673,667,661,768,631,773,594,791,558,813,542,838,526,810,493,789,464,787,433,801,432,784,459,726,491,681,536,653" alt="Landsat 1" class="element" id="elem0">
	  <area shape="poly" coords="703,608,725,438,759,292,802,214,846,176,893,204,918,265,937,347,947,436,927,504,786,611,721,626" alt="Landsat 2" class="element" id="elem1">
	  <area shape="poly" coords="395,793,336,692,242,669,135,657,94,683,80,718,110,759,180,778,263,797" alt="Landsat 3" class="element" id="elem2">
	</map>
<div id="box0" class="box" title="test 1">popup 1 c</div>
<div id="box1" class="box" title="test 2">popup2.</div>
<div id="box2" class="box" title="test 3">popup3</div>
</section>

在 JSFiddle 上查看

Answer 1

看来你需要调用dialog()来设置位置。
请参阅对话框((位置。

我假设dialog()返回原始元素的 jQuery 对象，用于链接。
该原始元素最终成为对话框的内容区域，不包括标题栏等。这就是为什么只有内容区域在移动，而不是框轮廓或标题栏的原因。

因此，在您的mousemove处理程序中，而不是这个：

box.position({
my: "left+3 bottom-3",
of: event
});

使用这个：

box.dialog({
position: {
my: "left+3 bottom-3",
of: event
}
});

或者这个：

box.dialog("option","position",{
my: "left+3 bottom-3",
of: event
});

(下面，我使用CSS缩小图像以进行演示。

$(function() {
$('.box').each(function(k, v) {

var box =
$(this).dialog({
modal: false,
resizable: false,
autoOpen: false,
});
$(this).parent().find('.ui-dialog-titlebar-close').hide();
$("#elem" + k)
.mouseover(function() {
box.dialog("open");
})
.mouseout(function() {
box.dialog("close");
})
.mousemove(function() {
box.dialog({
position: {
my: "left+3 bottom-3",
of: event
}
});
});
});
});

body {
margin: 0;
}
.legacy {
transform-origin: top left;
transform: scale(0.15);
}

<link href="https://code.jquery.com/ui/1.12.1/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="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<section class="legacy">
<img src="https://images.pexels.com/photos/433539/pexels-photo-433539.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="background" usemap="#image" id="background" />
<map name="image">
<area shape="poly" coords="580,637,673,667,661,768,631,773,594,791,558,813,542,838,526,810,493,789,464,787,433,801,432,784,459,726,491,681,536,653" alt="Landsat 1" class="element" id="elem0">
<area shape="poly" coords="703,608,725,438,759,292,802,214,846,176,893,204,918,265,937,347,947,436,927,504,786,611,721,626" alt="Landsat 2" class="element" id="elem1">
<area shape="poly" coords="395,793,336,692,242,669,135,657,94,683,80,718,110,759,180,778,263,797" alt="Landsat 3" class="element" id="elem2">
</map>
<div id="box0" class="box" title="test 1">popup 1 c</div>
<div id="box1" class="box" title="test 2">popup2.</div>
<div id="box2" class="box" title="test 3">popup3</div>
</section>