как динамически установить левое и верхнее положение для диалогового окна jquery ui - PullRequest
Новая
       13

как динамически установить левое и верхнее положение для диалогового окна jquery ui

0 голосов
/ 16 апреля 2020

У меня проблема с настройкой left и top позиции для jquery пользовательского интерфейса.

Я прочитал кое-где, где позиция может быть установлена ​​следующим образом position:[100,200], где 100 - левое значение и 200 - это верхнее значение.

в моем проекте мне нужно запомнить последнего пользователя position, где он drag откроет диалоговое окно и сам откроет его, поэтому я использовал setInterval здесь, чтобы продемонстрировать диалог изменения пользователя position.

Вопрос: Я хочу установить диалог left и top Положение между этими позициями i, e (max 200, max 300).

Примечание: как указано @ RoryMcCrossan , как запомнить его последнюю позицию и показать все последующие модалы в той же позиции (именно мне нужно) 

setInterval(function() {
  var left = Math.floor(Math.random() * (200 - 5 + 1)) + 5;
  var top1 = Math.floor(Math.random() * (300 - 5 + 1)) + 5;
  var positionArray = [left, top1];
  var positionObj = {
    postion: positionArray
  };
  
  console.clear();
  console.log(positionObj);
  
  $("#dialog").dialog({
    width: 200,
    height: 150,
    autoOpen: false,
    draggable: true,
    maxHeight: $(window).height() - 40,
    maxWidth: $(window).width() - 40,
    resizable: true,
    positionObj, //position:[left,top],
  });

  $("#dialog").dialog('open');
}, 1200);
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="dialog">
  <p>My dialog</p>
</div>

1 Ответ

0 голосов
/ 16 апреля 2020

Рассмотрим следующий пример. 

$(function() {
  var myInt;

  function createPos() {
    return [Math.floor(Math.random() * (200 - 5 + 1)) + 5, Math.floor(Math.random() * (300 - 5 + 1)) + 5];
  }

  $("#dialog").dialog({
    width: 200,
    height: 150,
    autoOpen: false,
    draggable: true,
    maxHeight: $(window).height() - 40,
    maxWidth: $(window).width() - 40,
    modal: true,
    resizable: true,
    position: createPos(),
    open: function() {
      myInt = setInterval(function() {
        var posArr = createPos();
        console.clear();
        console.log(posArr);
        $(".ui-dialog").css({
          left: posArr[0] + "px",
          top: posArr[1] + "px"
        });
      }, 1200);
    },
    close: function() {
      clearInterval(myInt);
    }
  }).dialog("open");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="dialog">
  <p>My dialog</p>
</div>

Параметр position можно изменить после открытия, но он не читается. Вы можете настроить CSS left и top родительского класса ui-dialog.

Вы также можете использовать .animate(): 

$(function() {
  var myInt;

  function createPos() {
    return [Math.floor(Math.random() * (200 - 5 + 1)) + 5, Math.floor(Math.random() * (300 - 5 + 1)) + 5];
  }

  $("#dialog").dialog({
    width: 200,
    height: 150,
    autoOpen: false,
    draggable: true,
    maxHeight: $(window).height() - 40,
    maxWidth: $(window).width() - 40,
    modal: true,
    resizable: true,
    open: function() {
      myInt = setInterval(function() {
        var posArr = createPos();
        console.clear();
        console.log(posArr);
        $(".ui-dialog").animate({
          left: posArr[0] + "px",
          top: posArr[1] + "px"
        }, 1000);
      }, 1200);
    },
    close: function() {
      clearInterval(myInt);
    }
  }).dialog("open");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="dialog">
  <p>My dialog</p>
</div>
...