2009-10-19 57 views
1

我不想在屏幕上居中显示对话框,所以我设置了框的顶部和左侧坐标。我将其定位,以便它出现在链接旁边,并且在点击之前最初不会打开。如何在屏幕上保留jQuery对话框?

$("#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被打开?或者我应该使用别的东西?

+0

我面临同样的问题...有没有运气? – 2009-11-26 12:55:55

+0

不幸的是没有 – rball 2009-11-26 15:40:13

回答

4

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

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

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

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

+0

最重要的是让我点击的链接旁边的对话框。 BlockUI非常酷,与jGrowl和其他人一样(我之前尝试过BeautyTips会自动做到这一点),但是它的想法是,如果它在选定的项目旁边弹出,它会更明显。 – rball 2009-10-19 21:16:13