jQuery UI 대화 상자 위치

116

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

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

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

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

감사!

jquery  jquery-ui 
— Wickethewok
소스
2
버전 1.9부터는 기본 도구 설명 위젯이 있습니다.
— theblang 2013-04-25

답변:

13

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

— 벤 쾰러
소스
끊어진 링크. 이 플러그인은 더 이상 유지되지 않습니다. 다른 답을 선택하는 것이 현명할까요?
— JohnK
109

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

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}
— 브라이언 엠 헌트
소스
29
이것이 최선의 접근 방식입니다. 하지만 처음으로 대화 상자를 만드는 경우 다음 dialog과 같이 추가 호출이 필요합니다 .$('#dialog').dialog({ width: 300 /* insert your options */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) });
— wsanville 2010
26
jQuery UI 위치 유틸리티는 숨겨진 요소에서 작동하지 않으므로이 코드로 배치하기 전에 대화 상자를 열어야합니다.
— Toadmyster
1
jQuery UI가 가장 좋은 방법입니다. 스콧 곤살레스 jQuery를 UI가 작동하고 그것을 사용하는 방법을 방법에 대한 깊이있는 설명이있다
— strangeloops
예를 들어 다음과 같아야한다는 것이 혼란 스럽습니다. at: 'top+50'대신at: 'top + 50'
— Lamy
두 개 이상의 위치를 ​​설정하는 방법으로 어려움을 겪는 사람을 위해 (내가 $('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });
— 그랬던
81

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

position:['middle',20],

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

나는 JQuery를 좋아한다.

— user1288395
소스
추가 플러그인없이 직관적으로 작동합니다. 내가 본 최고의 솔루션.
— PlanetUnknown
추가 플러그인이없는 매우 간단한 솔루션입니다. 이것은 받아 들여진 대답이어야합니다.
— kamui
13
젠장, 멋지지만 더 이상 사용되지 않습니다. "참고 : 문자열 및 배열 형식은 더 이상 사용되지 않습니다." api.jqueryui.com/dialog/#option-position 따라서 위치 개체 my / at / of thingy를 사용해야합니다. "jQuery UI 위치"에 대한 링크를 참조하십시오. 원하는대로 작동하도록 position : {my : "center top", at : "center top + 20", of : window} 같은 것을 얻을 수 있습니다. 더 많은 예는 링크를 참조하십시오.
— mikato 2013
@mikato ... jquery ui 1.10에 따르면 위치는 문자열과 배열을 허용합니다. ... ...하지만 나는 여전히 객체 표기법을 좋아합니다 (나는 키가 좋아요).
— dsdsdsdsd
3
대화 팝업 위치를 지정하는 데 너무 많은 코드가 필요하다는 것을 믿을 수 없습니다.
— Gi1ber7 2017 년
42

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

$(".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]);
});
— 제이민 파텔
소스
이 답변은 저에게 효과적이며 다른 솔루션을 설정하는 방법을 검색하는 데 몇 분 / 시간을 절약했습니다. 감사합니다!
— Nathan
1
+1 .position ()이 상대 위치를 제공하고 .offset (), 절대 위치 (내가 필요로하는 것)를 제공한다는 것을 이해했을 때 많은 도움이되었습니다
— daniloquio
16

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로 설정해야합니다.

— 마크 업
소스
1
나는 당신의 두 변수가 될 운명 생각 myDialogX하고myDialogY
— 케이시
16

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");
});
— xhochn
소스
나를 위해 이것은 따라 가기 가장 간단하고 속성 일 뿐이며 솔루션을 얻습니다. 나는 "위치"가 높이 / 너비 등과 함께이 대괄호 구문으로 언급 될 수 있다는 것을 몰랐다.
— user734028
나는 단서가 너무 오래 전입니다 : D
— xhochn
15

확인하십시오 <!DOCTYPE html>

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

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

— 다니엘 플리 펀스
소스
2
이것이 내가 가진 정확한 문제 였고 이로 인해 해결되었습니다.
— BobRodes 2016 년
1
내 xml 변환이 doctype을 추가하지 못했습니다.이 답변 은 stackoverflow.com/questions/3387127/set-html5-doctype-with-xslt 와 함께 작동 합니다.
— Daniel Bower
1
이 훌륭한 답변에 대해 1 개 이상의 찬성 투표를 원합니다. 몇 시간 동안 고군분투하던 문제를 해결했습니다.
— Dr. DS
10

컨트롤의 맨 위에 놓으려면 다음 코드를 사용할 수 있습니다.

    $("#dialog-edit").dialog({
...    
        position: { 
            my: 'top',
            at: 'top',
            of: $('#myControl')
        },

...
    });
— 라이브 사랑
소스
7 
$(".mytext").mouseover(function() {
   var width = 250;
   var height = 270;
   var posX = $(this).offset().left - $(document).scrollLeft() - width + $(this).outerWidth();
   var posY = $(this).offset().top - $(document).scrollTop() + $(this).outerHeight();
   $("#dialog").dialog({width:width, height:height ,position:[posX, posY]});
}

요소 바로 아래에 대화 상자를 배치합니다. 브라우저의 왼쪽 상단 모서리에 상대적인 위치를 계산하기 때문에 offset () 함수를 사용했지만 position () 함수는 요소의 부모 div 또는 iframe에 상대적인 위치를 계산합니다.

— M. 벨렌
소스
6

순수한 jquery를 수행하는 대신 다음을 수행합니다.

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

내가 귀하의 질문을 올바르게 이해하고 있다면 페이지에 스크롤이없는 것처럼 대화 상자를 배치하지만 스크롤을 고려하기를 원합니다. 내 코드가 그렇게해야합니다.

— 사무엘
소스
어떤 이유로 document.scrollleft가 정의되지 않았습니다.
— Wickethewok 2009
2
나의 나쁜, 그것의 scrollLeft scrollTop 대문자 화하는 것을 잊었다
— Samuel
var x = el.position (). left + el.outerWidth (); var y = el.position (). top-$ (document) .scrollTop (); 나를 위해 일했습니다. 문제는 정보를 변경 한 후 대화 상자의 높이와 너비를 가져올 수 없다는 것입니다.
— rball
4

이 페이지 는 스크롤 오프셋을 결정하는 방법을 보여줍니다. jQuery는 비슷한 기능을 가지고 있지만 찾을 수 없습니다. 페이지에 표시된 getScrollXY 함수를 사용하여 .position () 결과에서 x 및 y 좌표를 뺄 수 있어야합니다.

— 필립 티니
소스
4

조금 늦었지만 이제 $ j (object) .offset (). left 및 .top을 사용하여이 작업을 수행 할 수 있습니다.

— user363690
소스
4

말풍선이 옳지 않다고 생각합니다. 나는 그것이 작동하고 항목이 링크 바로 아래에 열리도록 약간 조정했습니다.

function PositionDialog(link) {
    $('#myDialog').dialog('open');
    var myDialogX = $(link).position().left;
    var myDialogY = $(link).position().top + $(link).outerHeight();
    $('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}
— 낭떠러지
소스
3

중앙 위치를 고정하기 위해 다음을 사용합니다.

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}
— 에두아르도 쿠 오모
소스
3

다음은 코드입니다 .., jQuery UI 대화 상자를 중앙에 배치하는 방법 ......

var $about = $("#about");

   $("#about_button").click(function() {
      $about.dialog({
         modal: true,
         title: "About the calendar",
         width: 600,         
         close: function() {
            $about.dialog("destroy");
            $about.hide();
         },
         buttons: {
            close : function() {
               $about.dialog("close");
            }
         }
      }).show();

      $about.dialog("option", "position", 'center');

   });
— 마누 RS
소스
3 
$("#myid").dialog({height:"auto",
        width:"auto",
        show: {effect: 'fade', speed: 1000},
        hide: {effect: 'fade', speed: 1000},
        open: function( event, ui ) {
          $("#myid").closest("div[role='dialog']").css({top:100,left:100});              
         }
    });
— 구 네스 에르 데미
소스
2

당신은 사용할 수 있습니다 $(this).offset(), 위치는 부모와 관련이 있습니다

— 닐 탕
소스
2

제안 된 모든 솔루션을 시도했지만 대화 상자가 주 문서의 일부가 아니고 자체 레이어가 있기 때문에 작동하지 않습니다 (하지만 내 추측입니다).

  1. 대화 상자 초기화 $("#dialog").dialog("option", "position", 'top')
  2. 다음으로 열기 $(dialog).dialog("open");

  3. 그런 다음 표시된 대화 상자의 x와 y를 가져옵니다 (문서의 다른 노드가 아닙니다!).

    var xcoord = $(dialog).position().left + ADD_MODIFIER_FOR_X_HERE;

    var ycoord= $(dialog).position().top + ADD_MODIFIER_FOR_Y_HERE;

    $(dialog).dialog('option', 'position', [xcoord , ycoord]);

이런 식으로 좌표는 문서가 아닌 대화 상자에서 가져오고 대화 상자의 레이어에 따라 위치가 변경됩니다.

— 미스터 마운틴
소스
1

내 대화 상자를 페이지 중앙에 배치하기 위해 여러 가지 방법을 시도했으며 코드가 다음과 같은 것을 확인했습니다.

$("#dialog").dialog("option", "position", 'top')

이것이 생성되었을 때 대화 위치를 변경하지 마십시오.

대신 전체 대화 상자를 가져 오도록 선택기 수준을 변경합니다.

$("#dialog").parent() <-이것은 dialog () 함수가 DOM에서 만드는 부모 개체입니다. 이것은 선택기 $ ( "# dialog")가 top, left 속성을 적용하지 않기 때문입니다.

대화를 중앙에 배치하기 위해 jQuery-Client-Centering-Plugin을 사용합니다.

$ ( "# dialog"). parent (). centerInClient ();

— jmozko
소스
1

위의 솔루션은 매우 사실이지만 UI 대화 상자는 창 크기가 조정 된 후 위치를 유지하지 않습니다. 아래 코드는 이것을합니다

            $(document).ready(function(){

                $(".test").click(function(){
                            var posX = $(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                            var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();
                            console.log("in click function");
                            $(".abc").dialog({
                                position:[posX,posY]
                            });

                        })

            })

            $(window).resize(function(){
                var posX=$(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();

            $(".abc").dialog({
                                position:[posX,posY]
                            });
            })
— Kaustubh-KAY
소스
0

중앙에 표시하기 위해 스타일에서 최상위 위치를 설정했으며 코드는 다음과 같습니다.

.ui-dialog {top : 100px! important;}

이 스타일은 위에서 아래로 100px 대화 상자를 표시해야합니다.

— 산 제이 장기 드
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.