jQuery 대화 상자를 중앙에 배치하려면 어떻게해야합니까?

StackOverflow https://stackoverflow.com/questions/1839702

문제

코드를 따르려고 시도했지만 상단 코너 위치가 중앙에 남은 대화 만하기 만하면 요소가 오른쪽으로 정렬됩니다. 중앙선이 대화 상자를 50% 50% 절반으로 줄 이도록하는 실제 센터에 대화 상자를 중앙으로하는 방법은 무엇입니까?

$('.selector').dialog({ position: 'center' });

http://docs.jquery.com/ui/dialog#option-position

도움이 되었습니까?

해결책

위치를 설정할 필요가 없다고 확신합니다.

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

기본적으로 중심해야합니다.

나는 기사를 보았고 또한 그것이 말한 것을 확인했다. 대화 상자 배치에 대한 공식 jQuery-UI 사이트 : 그리고 그것은 초기화와 초기화 후 2 개의 상태에 대해 논의되었다.

코드 예제-(jQuery UI에서 가져온 2009-12-03)

지정된 위치 옵션으로 대화 상자를 초기화하십시오.

$('.selector').dialog({ position: 'top' });

이후에 위치 옵션을 얻거나 설정하십시오.

//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');

위치 속성을 제거하려면 자체적으로 중심을 찾을 수 있다고 생각합니다. 그렇지 않으면 "옵션" "위치"및 "센터"의 3 가지 요소를 정의하는 두 번째 세터 옵션을 사용해보십시오.

다른 팁

최신 JQuery UI에는 위치 구성 요소가 있습니다.

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

문서: http://jqueryui.com/demos/position/
얻다: http://jqueryui.com/download

대화 상자에는 위치가 필요하기 때문에 JS 위치를 포함해야합니다.

<script src="jquery.ui.position.js"></script>

따라서 누군가가 내가했던 것처럼이 페이지를 쳤거나 15 분 안에 잊어 버린 경우 iframe (blah)에 jqueryui 대화 버전 1.10.1 및 jQuery 1.9.1을 사용하고 있으며 지정된 또는 내부에 필요합니다. 작동하지 않습니다

position: {
 my: "center bottom",
 at: "center top",
 of: $("#submitbutton"),
 within: $(".content")
}

올바른 방향으로 나를 가리킨 @vm370에 감사드립니다.

open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}

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

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

이 시도....

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

브라우저 창의 중앙에 jQuery 대화 상자를 넣는 최상의 결과를 얻고 있습니다.

position: { my: "center bottom", at: "center center", of: window },

아마도 옵션으로 그것을 배치하는 더 정확한 방법이있을 것입니다. "사용"문서에 설명 된대로 http://api.jqueryui.com/position/ 하지만 나는 서둘러 ...

기능을 호출해야합니다 dialog() 대화 상자를 두 번 배치하는 데 두 번 (jQuery v1.11.2 / jqueryui v1.10.4).

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});

다음 위치 매개 변수가 저를 위해 작동했습니다

position: { my: "right bottom", at: "center center", of: window },

행운을 빕니다!

Jquery UI 1.9.2, jQuery 및 이후 버전은 IE8을 지원하지 않습니다.

나는 그것에 대한 두 가지 해결책을 찾았다.

  1. 롤백으로 jquery UI 1.7.2 IE8을 지원하려면

  2. 이 코드를 사용해보십시오 Jquery UI 1.9.2 

position: {my: "center",  at: "center", of: $("body"),within: $("body") }

다음 논의에 따르면, 문제는 새로운 jQuery 버전의 IE 호환성이 적기 때문에 1.7.2로 되돌아 가면 IE8에서만 발생하는 문제를 해결하는 것으로 보입니다.http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8

jQuery 대화 상자 위치, 특히 브라우저보기 포트보다 큰 문서에 대해 지옥을 줄 수있는 또 다른 사항 - 선언을 추가해야합니다.

<!DOCTYPE html>

문서의 맨 위에.

그것 없이는 jQuery는 페이지 하단에 대화 상자를 넣는 경향이 있으며 드래그를 시도 할 때 오류가 발생할 수 있습니다.

개별 jQuery 파일 또는 사용자 정의 jQuery를 사용하는 경우 어느 쪽이든 jQuery.ui.position.js가 페이지에 추가되어 있는지 확인하십시오.

IE에서만이 문제를 해결하고 있습니까? 그렇다면 페이지 헤드 태그의 첫 번째 줄에 이것을 추가하십시오.

<meta http-equiv="X-UA-Compatible" content="IE=7" />

나는 모든 호환성 문제가 나중에 jqueries에서 고정되었지만 오늘이 문제를 해결했다.

이전 버전과 위치를 사용하고 싶지 않은 사람에 대해 이것을 시도하십시오.

$("#dialog-div-id").dialog({position: ['center', 'top'],....

또한 모바일 장치에서 jQuery UI를 사용하는 경우 수동 중심을 수행해야합니다. 대화 상자는 '왼쪽 및 상단'CSS 속성을 통해 수동으로 배치됩니다. 사용자가 오리엔테이션을 전환하는 경우 포지셔닝이 더 이상 중앙에 있지 않으며 나중에 적응 / 재 중심해야합니다.

Win7/IE9 환경의 경우 CSS 파일에 설정되었습니다.

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

나는 이것에 문제가 있었고 마침내 이것을 알아 냈습니다. 오늘까지 나는 정말 오래된 버전의 jQuery, 버전 1.8.2를 사용하고있었습니다.

내가 사용한 모든 곳 dialog 다음 위치 옵션으로 초기화했습니다.

$.dialog({
    position: "center"
});

그러나 나는 그 제거를 발견했다 position: "center" 또는 올바른 구문으로 교체하는 것은 예를 들어 트릭을 수행하지 않았습니다.

$.dialog({
    position: {
       my: "center",
       at: "center",
       of: window
    }
});

위의 내용이 맞지만 option 페이지를로드했을 때 위치를 중심으로 설정하려면 이전 방식으로 다음과 같이합니다.

// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");

이로 인해 모든 대화 상자 창이 뷰 포트의 왼쪽 상단에 고정되었습니다.

이것의 모든 인스턴스를 아래의 올바른 새 구문으로 바꿔야했습니다.

passwordDialogInstance.dialog(
    "option",
    "position", 
    { my: "center", at: "center", of: window }
);

나는 CSS로 고쳤다 : 

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}

IE9가 대화 상자를 중심으로 할 수 없습니다.

CSS에 이것을 추가하여 수정했습니다.

.ui-dialog {
    left:1%;
    right:1%;
}

퍼센트는 중요하지 않습니다. 모든 소수가 효과가있었습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top