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

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

jquery UI 대화상자를 사용하면 한 가지를 제외하고 모두 정상적으로 작동합니다.브라우저의 크기가 조정되면 대화 상자가 초기 위치에 유지되므로 매우 번거로울 수 있습니다.

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

"모달 대화상자" 예제를 누르고 브라우저 크기를 조정합니다.

브라우저 크기가 조정될 때 대화 상자가 자동으로 중앙에 오도록 설정할 수 있으면 좋겠습니다.내 앱의 모든 대화 상자에 대해 효율적인 방법으로 수행할 수 있습니까?

이 옵션을 설정하면 강제로 적용되므로 사용하는 모든 대화 상자에 동일한 선택기를 사용합니다.#dialog여기(모든 jQuery와 마찬가지로 사용자가 검색되지 않는 경우):

jQuery UI 1.10 이전 버전

$(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이벤트가 발생하므로 적절한 시간에 다시 센터링을 트리거합니다.

엘레세딜의 대답 대신에

이 솔루션은 즉시 사용할 수 없었습니다. 따라서 동적이지만 단축된 버전인 다음과 같은 작업을 수행했습니다.

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

그래도 엘레세딜의 경우 +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'));
            }
        });
    });

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

$(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에게 공을 돌립니다.

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

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

작동하는 또 다른 CSS 전용 옵션은 이것입니다.음의 여백은 키의 절반과 너비의 절반과 같아야 합니다.이 경우, 제 대화상자는 가로 720px 세로 400px 입니다.이것은 수직과 수평의 중심을 맞춥니다.

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

여러분 안녕하세요!

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

언급URL : https://stackoverflow.com/questions/3060146/how-to-auto-center-jquery-ui-dialog-when-resizing-browser