刷新jQuery UI对话框位置。

Question

我正在使用jQuery对话框。 该对话框的内容是动态的，因此在打开对话框时高度会发生变化。

$("#a_div").dialog({ width: 400 });

对话框最初会显示在页面中心，但当高度变化后不再居中。

如何在不关闭和重新打开对话框的情况下刷新其位置？

谢谢

- Luca Romagnoli

Answer 1

您需要通过执行以下操作重新设置位置：

$("#a_div").dialog({
    position: { 'my': 'center', 'at': 'center' }
});

这个位置在创建对话框时设置，但之后可以改变（或者只是重新设置为相同的值，强制jQuery重新计算）。

请查看此演示：http://jsfiddle.net/petermorlion/3wNUq/2/

- William Niu

---

“position”的字符串形式已被弃用。您应该使用position: { my: "center", at: "center", of: window }代替。 - cdmckay

@cdmckay，欢迎在解决方案中添加当前最佳实践！ :) - William Niu

对我来说，在末尾添加 window 就可以解决问题了：$("#a_div").dialog({position: { 'my': 'center', 'at': 'center', of: window }}); - dikirill

Answer 2

如果您想使用与jquery ui相同的精确位置设置来进行初始定位，则可以从jquery ui代码中获取选项，并在任何时候重新定位对话框时再次使用它们。

function refreshDialogPosition(id) {
    $("#" + id).position({
                        my: "center",
                        at: "center",
                        of: window,
                        collision: "fit",
                        // Ensure the titlebar is always visible
                        using: function (pos) {
                            var topOffset = $(this).css(pos).offset().top;
                            if (topOffset < 0) {
                                $(this).css("top", pos.top - topOffset);
                            }
                        }
                    });
}

使用：

refreshDialogPosition("YourDialogId");

这也可以确保您的标题栏始终可见。否则，当使用具有大内容的对话框时，您的标题栏将在屏幕外。（内容高度>窗口高度）

祝您拥有愉快的一天。

- ThdK

Answer 3

您可以直接使用JQuery的类尝试调整对话框的大小（此处有文档）

JQueryUI对话框的基本结构如下：

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

所以，也许你应该调整类的宽度和高度来设置最佳效果。

另一个解决方案是在打开对话框之前直接设置其宽度（当数据成功加载时）：

$("#a_div").dialog({ width: 400 });

$.get('my_url.php',function(data){

   $('#a_div .ui-dialog').css('width','400px');

   // Or...

   $('#a_div').css('width','400px');
});

我希望它能帮到你。

- Fran Verona

Answer 4

将“标记为正确”对我没有用。它一旦打开就会保持位置。 以下代码将在每次打开/重新打开对话框时重置对话框位置。

$dlg.dialog({
    open: function(event, ui) {
          // Reset Dialog Position
          $(this).dialog('widget').position({ my: 'center', at: 'center', of: window });
    }
});
$dlg.dialog('open');

- Shifat