programing

jQuery UI 대화 상자 위치 지정

muds 2023. 8. 19. 10:58
반응형

jQuery UI 대화 상자 위치 지정

jQuery 대화 상자 UI 라이브러리를 사용하여 일부 텍스트 옆에 대화 상자를 표시하려고 합니다.jQuery(jQuery) 대화 상자는 현재 뷰포트의 왼쪽 상단 모서리에서 측정되는 위치 파라미터를 사용합니다(즉,[0, 0]는 현재 스크롤된 위치에 관계없이 항상 브라우저 창의 왼쪽 상단 모서리에 위치합니다.하지만 위치를 검색할 수 있는 유일한 방법은 전체 페이지와 관련된 요소입니다.

제가 현재 가지고 있는 것은 다음과 같습니다.position.top1200 정도로 계산되어 대화 상자가 페이지의 나머지 내용보다 훨씬 아래에 놓입니다.

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

올바른 위치를 찾으려면 어떻게 해야 합니까?

감사합니다!

또는 jQuery UI 유틸리티를 사용할 수 있습니다.

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

위의 몇 가지 답변 덕분에 실험을 해본 결과 Modal Dialog의 정의에서 "위치" 속성을 편집하기만 하면 된다는 것을 알게 되었습니다.

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]);
});

를 확인해 .<!DOCTYPE html>

▁▁out,▁you면치놓▁miss▁if▁that▁i일을을 놓치면,<!DOCTYPE html> { window}, { 'center', 위치: 'center', 위을: 'center', of: 치를: 'center', of: window' 파일의 문서 됩니다.

EG: http://jsfiddle.net/npbx4561/ - 실행 창에서 내용을 복사하고 DocType을 제거합니다.HTML로 저장하고 실행하여 문제를 확인합니다.

제이민의 예를 한 걸음 더 나아가서, 저는 방금 클릭한 요소 위에 jQueryui-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가 OuterWidth() 또는 Outer를 평가할 수 없기 때문입니다.ui-dialog 요소가 페이지에 물리적으로 나타나지 않는 높이()

대화 상자 옵션에서 '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");
});

대화상자의 다른 구현을 위해 일부 jQuery 플러그인을 확인하십시오.클루팁은 기능이 풍부한 도구 설명/대화 상자 스타일 플러그인으로 나타납니다.네 번째 데모는 당신이 하려고 하는 것과 비슷하게 들립니다(하지만 당신이 찾고 있는 정확한 위치 지정 옵션은 없습니다).

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

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

...
    });

$(".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]});
}

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

$("#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});              
         }
    });

순수한 재쿼리를 하는 대신에, 나는 다음을 할 것입니다.

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

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

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

조금 늦었지만 $j(object)를 사용하면 이 작업을 수행할 수 있습니다. 왼쪽으로 이동하고 .top으로 이동합니다.

저는 말풍선이 꽤 옳다고 생각하지 않습니다.작동하도록 조금 조정했더니 링크 바로 아래 항목이 열립니다.

function PositionDialog(link) {
    $('#myDialog').dialog('open');
    var myDialogX = $(link).position().left;
    var myDialogY = $(link).position().top + $(link).outerHeight();
    $('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}

중심 위치를 고정하려면 다음을 사용합니다.

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}

여기 코드가 있습니다.,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');

   });

사용할 수 있습니다.$(this).offset()와 관련이 .

제안된 솔루션을 모두 시도해 보았지만 대화 상자가 기본 문서의 일부가 아니며 고유한 계층이 있기 때문에 작동하지 않습니다(하지만 제가 알기로는 그렇습니다).

  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]);

이렇게 하면 좌표는 문서가 아닌 대화상자의 좌표이며 대화상자의 계층에 따라 위치가 변경됩니다.

저는 제 대화를 페이지 중심에 두기 위해 많은 방법을 시도했고 코드가 다음과 같은 것을 보았습니다.

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

대화 상자를 만들 때 대화 상자 위치를 변경하지 않습니다.

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

$("#dialog").parent()<-- dialog() 함수가 DOM에 생성하는 상위 개체입니다. 이는 선택기 $("#dialog")가 위쪽, 왼쪽 속성을 적용하지 않기 때문입니다.

대화 상자의 중심을 맞추기 위해 jQuery-Client-Centering-Plugin을 사용합니다.

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

위의 해결책들은 매우 진실입니다...그러나 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]
                            });
            })

중앙에 표시할 스타일의 상단 위치를 설정하면 코드가 다음과 같습니다.

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

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

언급URL : https://stackoverflow.com/questions/744554/jquery-ui-dialog-positioning

반응형

'programing' 카테고리의 다른 글

도커 컨테이너 노드의 maridia db galera 클러스터 문제  (0) 2023.08.19
DOM에서 중복 ID를 확인하는 JQuery  (0) 2023.08.19
일반 CSS 미디어 쿼리 중단점  (0) 2023.08.19
스포츠 경기 시간 결과 포맷팅을 SQL로 처리하는 방법, 가급적이면 Maria.DB  (0) 2023.08.19
정적 방법으로 스프링 빈에 액세스  (0) 2023.08.19

'programing'의 다른글

  • 현재글jQuery UI 대화 상자 위치 지정

관련글

댓글

티스토리툴바