Question

我想使用热点/图像映射将光标置于图像的某些部分时显示不同的弹出框。根据{{3}}，我一切正常。但是，当我尝试将对话框从窗口的中心弹出更改为跟随光标的位置时，对话框的文本将移动，而标题和标题/内容框本身仍保持居中。

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

this previously answered question

Answer 1

似乎您需要致电dialog()来设置职位。
参见dialog() position。

我假设dialog()返回chaining的原始元素的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>

jQuery对话框标题未跟随mousemove

1 个答案: