Question

我想设置jQuery UI（1.12.1）对话框的绝对位置（x和y）。从各方面来说，我应该能够这样做（虽然jQuery文档莫名其妙地没有提到这种语法，here和here）：

$('#element').dialog('option', 'position', [x, y]);

成功使用此语法的人员示例如下：

jQuery UI dialog positioning
Can I make jquery dialog position independent of window size?
很多其他地方。

然而，当我尝试这一点时，没有任何反应。请考虑以下示例（可能希望全屏运行）：

$('#test').dialog({
  width: 200,
  height: 200
});

$('#move').click(function () {
  $('#test').dialog('option', 'position', [30, 30]);
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>

运行它，按下按钮，对话框不会移动。

为什么这对我不起作用，如何设置对话框的x，y位置？

请注意，在更改位置后，对话框必须保持可拖动和可调整大小。

Answer 1

我想通过使用

让它发挥作用

position: { my: "left top", at: "left+"+x+" top+"+y+"", of: window }

并阅读.position() documentation

我到达了这个

$('#test').dialog({
  width: 200,
  height: 200
});

$('#move').click(function () {
  var x = 30,
      y = 30;
  $('#test').dialog({
    //position: { my: "left top", at: "left bottom", of: window }
    position: { my: "left top", at: "left+" + x + " top+" + y + "", of: window }
  });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button id="move">Move</button>
<div id="test" title="test">This is a test.</div>
</body>

jQuery UI设置绝对对话位置什么都不做

1 个答案: