高度未知的居中jQuery UI对话框-是否可能? [英] Centering jQuery UI dialog of unknown height - is it possible?

问题描述

如果高度未知，是否可以在可见窗口的中心打开jQuery对话框?

Is there a way of making a jQuery dialog opening in the center of the visible window if it's of an unknown height?

我有一个对话框，它会打开一个动态加载的高度未知的表格.首次打开时，它会稍微向屏幕底部偏移.当我关闭它并再次打开它时，似乎顶部偏移量已正确计算.

I have a dialog that opens a dynamically loaded form of unknown height. When opening it the first time, it's slightly offset towards the bottom of the screen. When I close it and open it again, it seems that the top offset is calculated properly.

我无法提前知道内容的高度，所以这对我来说是个问题.

I can't know the content height in advance so this is kind of an issue for me.

编辑:这是示例代码

我有两页-一页是实例化对话框的对话框容器，另一页是对话框的内容.单击链接后，它的href用作对话框的目标页面.

I have two pages - one is the dialog container which instantiates the dialog, and another is the dialog content. When a link is clicked, it's href is used as a target page for the dialog.

$(document).ready(function(){
    $(a).click(function(){
        $("#dialog").load($(this).attr('href'))
        .dialog({
            modal: true,
            width: 400
        });
        $("#dialog").dialog('open');
    });
});

推荐答案

您需要指定高度:'auto'以使对话框根据其内容进行调整.

You need to specify height: 'auto' to make the dialog adjust based on its content.

.dialog({
    height: 'auto',
});

@ jon3laze位置"的默认值为中心"，因此无需在打开的回调函数中进行设置.

@jon3laze The default value for "position" is 'center', so no need to set it in open callback function.

@eagerMoose无需致电

@eagerMoose There is no need to call the

$("#dialog").dialog('open');

因为对话框具有autoOpen选项，该选项默认为true，并且实例化后立即打开对话框.对.dialog('open')的第二次调用将被忽略.

because dialogs have an autoOpen option, which defaults to true and dialog is being opened immediately after instantiation. The second call to .dialog('open') is ignored.

由于加载是异步的，因此可能在加载内容之前初始化对话框.尝试在加载完成时初始化对话框.

because load is asynchronous the dialog is probably initialized before the content is loaded. Try to initialize the dialog in the load complete.

$(document).ready(function(){
    $(a).click(function(){
        $("#dialog").load($(this).attr('href'), function(){
            $(this).dialog({
                modal: true,
                width: 400
            });
        });
    });
});

这篇关于高度未知的居中jQuery UI对话框-是否可能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！