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

보다 유연한 방식으로 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에게 감사드립니다.

답변

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

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

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