화면에서 jQuery 대화 상자를 유지하려면 어떻게해야합니까?

Question

대화 상자를 화면 중앙에 배치하고 싶지 않으므로 상자의 왼쪽 위 및 왼쪽 좌표를 설정하고 있습니다. 링크 옆에 나타나고 클릭 할 때까지 처음에는 열리지 않도록 배치합니다. 여기에서

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

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

및

나는 화면에 오류 메시지를 표시합니다. 예를 들어 페이지의 맨 아래에있는 경우 사용자가 대화 상자를 보려면 아래로 스크롤하지 않아도됩니다. 오류 메시지가 오른쪽에있는 모든 경우에 동일한 작업을 수행하면 클릭 된 요소의 왼쪽에 오류 메시지가 표시됩니다. 내가 대화 상자를 표시하기 전에 자동 너비와 높이를 가지고 있기 때문에 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

나는 신음 소리 기능은 당신이 일할 수있는 뭔가 것 같아요.

여기서 가장 좋은 점은 오류 메시지가 매우 일관된 위치에 나타나며 "위반하는"요소의 정확한 위치에 대해 걱정할 필요가 없을뿐만 아니라 동시에 - 안심할 수 있다는 것입니다 오류 메시지는 항상 사용자에게 표시됩니다.