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

альтернативно ответу Эллеседила,

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

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

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

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

ниже приведена адаптация кода релевантности из этого потока. Это расширение по существу создает новый параметр диалога под названием 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'));
            }
        });
    });

Это позволяет вам поставить a "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 для полного решения.

еще один 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
    });
});

Привет всем!

ваниль 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 });
  }
}());