[jquery] jQuery UI 대화 상자 위치

마우스를 가져갈 때 일부 텍스트 옆에 대화 상자를 배치하기 위해 jQuery 대화 상자 UI 라이브러리 를 사용하려고합니다 . jQuery 대화 상자는 현재 뷰포트의 왼쪽 상단 모서리에서 측정 된 위치 매개 변수를 사용합니다 (즉, [0, 0]현재 스크롤되는 위치에 관계없이 항상 브라우저 창의 왼쪽 상단 모서리에 배치됩니다). 그러나 위치를 검색하는 유일한 방법은 전체 페이지와 관련된 요소입니다.

다음은 내가 현재 가지고있는 것입니다. position.top페이지의 나머지 콘텐츠 아래에 대화 상자를 배치하는 1200 정도의 것으로 계산됩니다.

$(".mytext").mouseover(function() {
    position = $(this).position();
    $("#dialog").dialog('option', 'position', [position.top, position.left]);
}

올바른 위치를 어떻게 찾을 수 있습니까?

감사!

답변

대화의 다른 구현에 대한 jQuery 플러그인 중 일부를 확인하십시오. Cluetip 은 기능이 풍부한 도구 설명 / 대화 상자 스타일 플러그인으로 보입니다. 네 번째 데모는 당신이하려는 것과 비슷하게 들립니다 (하지만 당신이 찾고있는 정확한 포지셔닝 옵션이 없다는 것을 알지만).

답변

대안으로 사용할 수있는 jQuery를 UI의 Position유틸리티 등을

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}

답변

위의 몇 가지 답변 덕분에 실험을했고 궁극적으로해야 할 일은 Modal Dialog의 정의에서 “position”속성을 편집하는 것입니다.

position:['middle',20],

JQuery는 가로 “X”값에 대한 “중간”텍스트에 문제가 없었으며 내 대화 상자는 상단에서 20px 아래로 중간에 팝업되었습니다.

나는 JQuery를 좋아한다.

답변

모든 답변을 읽은 후 마침내 이것은 나를 위해 일했습니다.

$(".mytext").mouseover(function() {
    var x = jQuery(this).position().left + jQuery(this).outerWidth();
    var y = jQuery(this).position().top - jQuery(document).scrollTop();
    jQuery("#dialog").dialog('option', 'position', [x,y]);
});

답변

Jaymin의 예제를 한 단계 더 발전 시켜서 방금 클릭 한 요소 위에 jQuery ui-dialog 요소를 배치하기 위해 다음을 생각해 냈습니다 ( “말풍선”을 생각하십시오).

$('#myDialog').dialog( 'open' );
var myDialogX = $(this).position().left - $(this).outerWidth();
var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
$('#myDialog').dialog( 'option', 'position', [myDialogX, myDialogY] );

상대적인 너비와 높이 오프셋을 계산하기 전에 ui-dialog 요소를 “열기”에 유의하십시오. 이는 jQuery가 페이지에 물리적으로 나타나는 ui-dialog 요소없이 outerWidth () 또는 outerHeight ()를 평가할 수 없기 때문입니다.

대화 상자 옵션에서 ‘modal’을 false로 설정해야합니다.

답변

http://docs.jquery.com/UI/API/1.8/Dialog

왼쪽 상단 모서리에있는 고정 대화 상자의 예 :

$("#dialogId").dialog({
    autoOpen: false,
    modal: false,
    draggable: false,
    height: "auto",
    width: "auto",
    resizable: false,
    position: [0,28],
    create: function (event) { $(event.target).parent().css('position', 'fixed');},
    open: function() {
        //$('#object').load...
    }
});

$("#dialogOpener").click(function() {
    $("#dialogId").dialog("open");
});

답변

확인하십시오 <!DOCTYPE html>

나는 당신이 놓친 경우 <!DOCTYPE html>HTML 파일 상단에서 위치를 지정하더라도 대화 상자가 창 내부가 아닌 문서 내용 중앙에 표시됩니다. {my : ‘center’, at : ‘center’ , of : window}

예 : http://jsfiddle.net/npbx4561/- 실행 창에서 콘텐츠를 복사하고 DocType을 제거합니다. HTML로 저장하고 실행하여 문제를 확인하십시오.