Question

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

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

对话框最初显示在页面的中心位置。但是当高度变化不再是中心时。

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

感谢

Answer 1

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

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

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

请参阅此演示：http://jsfiddle.net/petermorlion/3wNUq/2/

Answer 2

您可以尝试直接使用JQuery的类（documentation here）

来调整对话框的大小

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');
});

我希望它可以帮到你。

Answer 3

如果你想使用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");

这也将确保您的标题栏始终可见。否则，在使用包含大量内容的对话框时，标题栏将位于屏幕之外。（内容高度＆gt;窗口高度）

度过愉快的一天。

刷新jquery ui对话框位置

3 个答案: