JQuery 对话框标题不跟随 mousemove

Posted 2023-05-08

【中文标题】JQuery 对话框标题不跟随 mousemove

【英文标题】：JQuery Dialog title not following mousemove

【发布时间】：2019-03-17 02:25:41

【问题描述】：

当光标位于使用热点/图像映射的图像的某些部分时，我想显示不同的弹出框。基于this previously answered 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"  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"  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"  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"  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>

View on JSFiddle

【参考方案1】：

看来你需要调用dialog()来设置位置。 见dialog() position。

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

所以，在你的 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"  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"  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"  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"  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>

【讨论】：

你是救生员。我之前尝试过添加 .dialog 的变体，但我完全是新手，所以我一定没有完全正确地使用它。非常感谢！