如何在屏幕上保留 jQuery 对话框？

Question

我不想让对话框在屏幕上居中，所以我设置了框的顶部和左侧坐标。我正在定位它，使其显示在链接旁边，并且在单击之前不会最初打开。

$("#error").dialog({
    bgiframe: true,
    autoOpen: false,
    width: 'auto',
    height: 'auto',
    hide: 'slide',
    show: 'clip'
});

和

<div id="error" title="Error">
<div id="errorText">&nbsp;</div>
</div>

从这里我想在屏幕上显示一条错误消息。例如，如果我在页面底部，我不希望用户必须向下滚动才能看到对话框。如果错误消息一直在右侧，我想在单击元素的左侧显示它。唯一的问题是因为我有自动宽度和高度，所以在显示对话框之前它似乎不知道 div 的高度/宽度；使用 $('#error').height() 或 $('#error').width()。

$("#errorText").html(request.responseText + '<p>(Esc or click to close)</p>');
var x = el.position().left + el.outerWidth();
var y = el.position().top - $(document).scrollTop();
var position = el.position();
var bottomOfDialog = position.top + heightOfTheDialog;
if(bottomOfDialog > document.height)
{
     y -= heightOfTheDialog;
}
var rightSideOfDialog = position.left + widthOfTheDialog;
if(rightSideOfDialog > document.width)
{
    x -= (widthOfTheDialog + el.outerWidth());
}               
$("#error").dialog('option', 'position', [x, y]).dialog('open');

如何在实际对话框打开之前获得正确的 heightOfTheDialog 和 widthOfTheDialog？还是我应该使用其他东西？

Answer 1

如果您的目标是向用户显示一条消息并让他们不必滚动来发现它 - 我相信这是根据您的描述的情况 - 您可能需要考虑使用 jQuery BlockUI Plugin 告诉用户错误信息。查看以下演示：

http://malsup.com/jquery/block/#demos

我认为咆哮功能可能是您可以使用的。

这里的主要好处是错误消息将出现在一个非常一致的位置，您无需关心“违规”元素的确切位置，但可以 - 同时 - 放心错误消息将始终对用户可见。