브라우저 크기를 조정할 때 jQuery UI 대화 상자를 자동 중앙에 배치하는 방법은 무엇입니까?

jquery UI 대화 상자를 사용하면 한 가지를 제외하고 모두 잘 작동합니다. 브라우저의 크기가 조정되면 대화 상자가 초기 위치에 그대로 유지되므로 정말 짜증이 날 수 있습니다.

http://jqueryui.com/demos/dialog/ 에서 테스트 할 수 있습니다.

"모달 대화 상자"예제를 클릭하고 브라우저 크기를 조정하십시오.

브라우저 크기가 조정될 때 대화 상자가 자동 ​​중앙에 오도록 할 수 있기를 바랍니다. 내 앱의 모든 대화 상자에서이 작업을 효율적으로 수행 할 수 있습니까?

감사합니다!

position옵션 을 설정하면 강제로 적용되므로 #dialog여기 에서 사용하는 모든 대화 상자를 덮는 동일한 선택기를 사용 하십시오 (찾을 수없는 경우 모든 jQuery와 같이 작업이 수행되지 않음).

1.10 이전의 jQuery UI

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

jQuery UI 1.10 이상

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

다음은 위의 코드 만 추가하는 동일한 jQuery UI 데모 페이지입니다. 을 사용하여 창의 resize이벤트에 핸들러를 추가하고 .resize()있으므로 적절한 시간에 다시 중앙을 트리거합니다.

Ellesedil의 대답 대신

이 솔루션은 즉시 작동하지 않았으므로 동적이지만 단축 버전 인 다음을 수행했습니다.

$( window ).resize(function() {
    $(".ui-dialog-content:visible").each(function () {
        $( this ).dialog("option","position",$(this).dialog("option","position"));
    });
});

하지만 Ellesedil은 +1

편집하다:

단일 대화 상자에서 잘 작동하는 훨씬 더 짧은 버전 :

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

.each ()를 사용할 필요는 없습니다. 만지고 싶지 않은 고유 한 대화 상자가있는 경우에는 사용할 수 있습니다.

보다 유연한 방식으로 Nick의 답변을 사용하는보다 포괄적 인 답변은 여기 에서 찾을 수 있습니다 .

해당 스레드에서 관련 코드를 수정 한 내용은 다음과 같습니다. 이 확장은 기본적으로 true 또는 false를 허용하는 autoReposition이라는 새 대화 상자 설정을 만듭니다. 작성된 코드의 기본값은 true입니다. 페이지에서 활용할 수 있도록 프로젝트의 .js 파일에 넣으십시오.

    $.ui.dialog.prototype.options.autoReposition = true;
    $(window).resize(function () {
        $(".ui-dialog-content:visible").each(function () {
            if ($(this).dialog('option', 'autoReposition')) {
                $(this).dialog('option', 'position', $(this).dialog('option', 'position'));
            }
        });
    });

이렇게하면 페이지에서 대화 상자를 만들 때이 새 설정에 대해 "true"또는 "false"를 제공 할 수 있습니다.

$(function() {
    $('#divModalDialog').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        width: 435,
        height: 200,
        dialogClass: "loadingDialog",
        autoReposition: true,    //This is the new autoReposition setting
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            }
        }
    });
});

이제이 대화 상자는 항상 자체 위치를 변경합니다. AutoReposition (또는 설정이라고 부르는 모든 것)은 기본 위치가없는 모든 대화 상자를 처리 할 수 ​​있으며 창 크기가 조정될 때 자동으로 위치를 변경할 수 있습니다. 대화 상자를 만들 때 이것을 설정하기 때문에 재배치 기능이 대화 상자 자체에 내장되기 때문에 어떻게 든 대화 상자를 식별 할 필요가 없습니다. 그리고 가장 좋은 부분은 이것이 대화 상자별로 설정되기 때문에 일부 대화 상자는 자체 위치를 변경하고 다른 대화 상자는 그대로 유지할 수 있다는 것입니다.

완전한 솔루션을 위해 jQuery 포럼의 사용자 scott.gonzalez에게 감사드립니다.

작동하는 또 다른 CSS 전용 옵션은 이것입니다. 음수 여백은 높이의 절반과 너비의 절반과 같아야합니다. 따라서이 경우 내 대화 상자는 너비 720px, 높이 400px입니다. 이것은 수직 및 수평으로 중앙에 배치됩니다.

.ui-dialog {
  top:50% !important;
  margin-top:-200px !important; 
  left:50% !important;
  margin-left:-360px !important
}

또는 jQuery UI 위치를 사용할 수 있습니다.

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

안녕하세요 여러분!

Vanilla JS 솔루션 :

(function() {
  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;

  function resizeThrottler() {
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
      }, 66);
    }
  }

  function actualResizeHandler() {
    $(".ui-dialog-content").dialog("option", "position", { my: "center", at: "center", of: window });
  }
}());