时间戳

首页 > 解决方案 > JQuery 对话框标题不跟随 mousemove

jquery - JQuery 对话框标题不跟随 mousemove

问题描述

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

我尝试更改 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 上查看

标签： jqueryhtmljquery-uidialog

解决方案

看来你需要打电话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>

推荐阅读