요소 및 창에 대한 상대적 위치 지정

Question

현재 여러 옵션이 정의 된 대화 상자가 있습니다. 사용자가 버튼을 클릭하면 표시됩니다. 내 대화 상자는 다음과 같이 정의됩니다.

$('#newIssueDialog').dialog({ 
     autoOpen: false, 
     modal: true, 
     closeOnEscape: true, 
     draggable: false, 
     resizable: false, 
     width: 415, 
     height: 175, 
     position: {my: "top", at: "bottom", of: "#btnNewIssue"} 
    }); 

내 대화 상자가 내 단추의 가운데에 표시됩니다.
내가 실제로하고 싶은 것은 버튼 아래의 대화 상자를 띄우지 만 내 창을 중심으로합니다.

그 방법에 대한 아이디어가 있으십니까?

편집 : 또한 문서 상대적인 창 위치를 고려할 수 있습니까? 페이지에 스크롤 막대가 있고 사용자가 페이지를 세로 또는 가로로 스크롤 한 경우 버튼의 위치와 페이지의 현재 위치를 계산하여 버튼 아래 여전히 중앙에 위치하도록 할 수 있습니까?

Answer 1

당신은 left 및 top이 같은의 위치를 ​​직접 계산할 수 있습니다 대신 my, at, of를 사용 :

<div id="newIssueDialog"> My modal dialog</div> 
<button id="btnNewIssue">Click Me</button> 

: 예를 들어 기본 HTML을 사용하여

$("#btnNewIssue").on("click", function() { 
    var $button = $(this); 
    var $dialog = $('#newIssueDialog'); 

    //var top = $button.position().top + $button.height() + ($button.outerHeight()/2); 
    var top = $button.position().top + $button.height() + (($button.outerHeight(true) - $button.height())); 
    var left = ($(document).width() - ($dialog.outerWidth/2))/2 

    $dialog.dialog({ 
     autoOpen: true, 
     modal: true, 
     closeOnEscape: true, 
     draggable: false, 
     resizable: false, 
     width: 415, 
     height: 175, 
     position: [left, top] 
    }); 
});​ 

DEMO

- 위치 버튼 아래 대화하지만 윈도우의 중심/문서

내가 위의 예에서 document을 사용하고 있지만, 당신은 당신이 원하는 대신하는 경우 창을 사용할 수없는 차이에 조금이 있어야한다.

편집

버튼의 테두리 높이, 패딩과 마진이 제대로 포함되지 않았습니다 이에 간과를 수정했습니다.

은 나뿐만 아니라 버튼이 어떤 특정 한 경우 버튼의 borders, padding 및 margins를 포함 outerHeight(true)에서 height의 공제를 추가하지 않고 바이올린을 저장.

이 :

var top = $button.position().top + $button.height() + ($button.outerHeight()/2); 

이되어야한다

var top = $button.position().top + $button.height() + (($button.outerHeight(true) - $button.height())); 

데모는 물론 업데이트되었습니다. 스크롤바가 페이지에있는 경우

편집

그러나, 지금 문제가 실행 해요.수직 스크롤 위치에 대한

, 그냥 이런 말 현재 scrollTop() 값을 공제 :

var top = $button.position().top + $button.height() + ($button.outerHeight(true) - $button.height()) - $(window).scrollTop(); 

를 수평으로 당신은 아무것도 변경할 필요가 없습니다 중간에 모달을 배치하십시오. left을 계산하는 위의 코드는 항상 작동하는 것으로 보입니다.

var left = (($(document).width() - ($dialog.outerWidth/2))/2) - $(window).scrollLeft(); 

또는 가능

: 그러나이 특정 마크 업에 당신을 위해 문제가있는 경우, 당신이 그것을 비슷한에 공제 할 필요가 있다는 점에서 같은 방식으로 작동 것이라고 가정 할 scrollLeft()에서 참조하시기 바랍니다

var left = ($(window).scrollLeft() - $(document).width() - ($dialog.outerWidth/2))/2; 

으로는 DEMO 아래 필요하지 않지만 당신이 경우에, 주위를 이동하고에 맞는 방법을 참조했다.

주의 사항 귀하의 버튼 난 경우 화면 하단에 가까움 모달은 이 아니며 화면이 아니기 때문에은 버튼 아래에 있지만 대화 상자의 하단은 화면 하단에 맞춰집니다. 그것이 예상되는 행동입니다. 그래도 버튼 아래에 충분한 공간이 있으면 대화 상자는 항상 버튼 아래에 과 같이 표시됩니다.

DEMO - 윈도우 스크롤 위치를 포함
는 (당신은 버튼에 도착 아래로 스크롤해야하고 또한 제대로 테스트하기 위해 오른쪽으로 스크롤 할 수 있습니다)

Answer 2

내가 제시 할 수있는 가장 좋은 점은 대화 상자를 열 때 X/Y 좌표를 직접 지정해야한다는 것입니다.

$("#btnNewIssue").button().click(function(){ 
    var x = ($(window).width() - 415)/2; 
    var y = $(this).offset().top + $(this).height(); 
    $("#newIssueDialog").dialog("option", "position", [x,y]).dialog("open"); 
});​ 

Demo JSFiddle