Как автоматически центрировать диалог jQuery UI при изменении размера браузера?

В качестве альтернативы ответ Ellesedil,

Это решение не сработало для меня сразу, поэтому я сделал следующее, которое также является динамическим, но сокращенным вариантом:

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

+1 для Ellesedil хотя

EDIT:

Много более короткая версия, которая отлично подходит для одиночных диалогов:

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

Не обязательно использовать .each(), возможно, если у вас есть уникальные диалоги, которые вы не хотите касаться.

Более полный ответ, который использует ответ Ник более гибким способом, можно найти здесь.

Ниже приведена адаптация кода релевантности из этого потока. Это расширение по существу создает новый диалог, называемый autoReposition, который принимает true или false. В коде, указанном по умолчанию, используется опция 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 (или все, что вы вызываете параметр) может обрабатывать любые диалоги, которые не имеют позиции по умолчанию и автоматически переупорядочивают их при изменении размера окна. Поскольку вы настраиваете это при создании диалогового окна, вам не нужно каким-либо образом идентифицировать диалоговое окно, потому что функция перепозиционирования становится встроенной в сам диалог. И самое главное, так как это задано для каждого диалога, вы можете изменить некоторые диалоги, а другие останутся там, где они есть.

Кредит пользователю scott.gonzalez на форумах jQuery для полного решения.

Другой вариант CSS-only, который работает, - это. Отрицательные поля должны быть равны половине вашей высоты и половине вашей ширины. Таким образом, в этом случае мой диалог имеет ширину 720 пикселей и высоту 400 пикселей. Это центрирует его по вертикали и по горизонтали.

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

В качестве альтернативы можно использовать jQuery ui position,

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