요소를 배치하고 있지만 여전히 화면에 있는지 확인하십시오.

Question

사용자가 단추를 클릭 할 때 열리는 jQuery UI 대화 상자가 있으며 단추 근처에 대화 상자를 표시하려고합니다. 이것은 예를 들어, 열심히되지 않습니다 : 버튼이 화면 맨 오른쪽에, 또는 화면 맨 아래에 때

var pos = $('#mybutton').offset(); 
$('#mydlg').dialog({ 
    // ... 
    autoOpen: false, 
    position: [pos.left, pos.top] 
}); 

문제입니다. 새롭게 열린 대화 상자가 화면을 벗어나기 때문에 창을 스크롤합니다.

대화 상자가 왼쪽/위로 열리도록 위치를 계산하려면 어떻게해야합니까? 그러면이 경우에만 화면에 그대로 유지됩니까?

Answer 1

var pos = $('#mybutton').offset(); 

    //if dialog height/width are known 

    var dialogTop = pos.Top; 
    var dialogLeft = pos.left; 

    if((dialogHeight + pos.top) > $(window).height()) 
    { 
     dialogTop -= dialogHeight; 
    } 

    if((dialogWidth + pos.left) > $(window).width()) 
    { 
     dialogLeft -= dialogWidth; 
    } 

    $('#mydlg').dialog({ 
     autoOpen: false, 
     position: [dialogLeft, dialogTop] 
    }); 

    //if the dialog height/width are unknown then move this to a function in the dialog onLoad