如何在屏幕上保留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

我认为低吼功能可能是一些你能一起工作。

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