Название JQuery Dialog не следует за указателем мыши - PullRequest
Новая
       31

Название JQuery Dialog не следует за указателем мыши

0 голосов
/ 12 октября 2018

Я хочу, чтобы различные всплывающие окна отображались, когда курсор находится на определенных участках изображения с использованием горячих точек / карт изображений.У меня все работало хорошо на основании этого ранее отвеченного вопроса .Однако, когда я попытался изменить места, где диалоговое окно всплывает из центра окна, следуя за курсором, текст этого диалогового окна перемещается, а само поле заголовка и заголовка / содержимого остается в центре.

Я попытался изменить обозначения позиций в 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

1 Ответ

0 голосов
/ 12 октября 2018

Похоже, вам нужно вызвать dialog() для установки позиции.
См. dialog () position .

Я предполагаю, dialog() возвращает объект jQuery объектаоригинальный элемент, для цепочка .
Этот оригинальный элемент становится областью содержимого диалога, исключая заголовок и т. д.
Именно поэтому перемещается только область содержимого, а не контур блока илиtitlebar.

Итак, в вашем обработчике 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>
...