Question

有没有办法让jQuery对话框在可见窗口的中心打开，如果它的高度未知？

我有一个对话框，可以打开一个未知高度的动态加载形式。第一次打开时，它稍微偏向屏幕底部。当我关闭它并再次打开它时，似乎正确计算了顶部偏移量。

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

编辑：这是一个示例代码

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

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

Answer 1

您需要指定高度：'自动'以根据内容调整对话框。

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

@ jon3laze“position”的默认值是'center'，所以不需要在open回调函数中设置它。

@eagerMoose无需调用

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

因为对话框有一个autoOpen选项，默认为true，并且在实例化后立即打开对话框。第二次调用.dialog（'open'）将被忽略。

编辑：因为加载是异步的，所以在加载内容之前可能会初始化对话框。尝试在加载完成时初始化对话框。

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

Answer 2

您可以在使用height property

设置对话框之前获取高度

$（窗口）.height（）; //返回浏览器视口的高度

（文档）$ .height（）; //返回HTML文档的高度

$(document).ready(function(){

    var h = $(document).height();

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

此外，您可以将.dialog('open')链接到通话结束。

此处示例http://jsfiddle.net/BZpPH/1/

<强>更新

问题听起来像是内容的位置。您可以使用open事件选项让它在打开时重置大小。我无法让这个工作在jsfiddle，因为我无法弄清楚如何让.load()方法工作。但是我在我自己的服务器上尝试了这个，默认位置到顶部，它会打开屏幕的中心。

$(a).click(function() {
    $('#dialog').load($(this).attr('href'))
        .dialog({
            modal: true,
            width: 400,
            height: 'auto',
            open: function() {
                $(this).dialog('option', 'position', 'center');
            }
        });
    });
});

Answer 3

罪魁祸首是.load（）函数。这是一个ajax调用，意味着.dialog（）函数在内容实际加载之前被调用，因此内容高度实际上是猜测。

我设法通过在.load（）函数中定义对话框及其操作来解决问题，就像这个

一样

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

将未知高度的jQuery UI对话框居中 - 是否可能？

3 个答案: