基本「きゃーすてきー」なんだろうけどさ。
jQuery UI Position に従って「Dialog がどの種類も真ん中では使いにくかろ」とたくさん出してる Dialog の初期表示位置を「粗く」コントロールしていたのだけれど、「left, right, top, bottom, center」だけでは足りないので、Each dimension can also contain offsets, in pixels or percent, e.g., "right+10 top-25%". を試みようとして思わずハマった、という話。
理解してしまえばなんてことないことだったけれど、「オフセットはダイアログの四隅も考慮の上で」指定しないとダメなわけなのよ。なのでたとえばこんなのが「正解」なの:
1 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
2 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
3 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
4 <!-- ... -->
5 <div id="settings-dialog" class="dialog" title="Settings">
6 <!-- ... -->
7 </div>
8 <!-- ... -->
9 <script>
10 /* ... */
11 $("#open-settings-dialog").on("click", function() {
12 var width = 400;
13 var height = 200;
14 var x_off = 80;
15 var y_off = 40;
16 $("#settings-dialog").dialog({
17 width: width,
18 height: height,
19 position: {
20 at: "left+" + (x_off + width / 2) + " top+" + (y_off + height / 2),
21 },
22 });
23 });
24 </script>
最初全然言うこと効かなくて意味わからなかったよ。そしてだとすると、「デフォルトの width, height 任せ」は避けた方がかえって楽、というちょっといやらしい結論に。(もしくは多少のズレは気にしない、として「えいや」でオフセットを決めるかどっちかだろう。)
こういうのさぁ、いっそこれが許されたら楽なのに:
効かないよ残念ながら
1 $("#open-settings-dialog").on("click", function() {
2 $("#settings-dialog").dialog({
3 position: {
4 at: "200 200",
5 },
6 });
7 });
