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

Когда вы используете диалог jquery UI, все работает хорошо, за исключением одного. При изменении размера браузера диалоговое окно просто остается в исходном положении, что может сильно раздражать.

Вы можете проверить это: http://jqueryui.com/demos/dialog/

Щелкните пример «модального диалогового окна» и измените размер браузера.

Я бы хотел, чтобы диалоги автоматически центрировались при изменении размера браузера. Можно ли это эффективно сделать для всех диалогов в моем приложении?

Большое спасибо!

Установка positionопции приведет к этому, поэтому просто используйте тот же селектор, который охватывает все ваши диалоги, которые я использую #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, добавляющая только приведенный выше код , мы просто добавляем обработчик к resizeсобытию окна с помощью .resize(), поэтому он запускает повторное центрирование в соответствующее время. Взаимодействие с другими людьми

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

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

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

+1 для Ellesedil хотя

РЕДАКТИРОВАТЬ:

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

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

Это позволяет вам указать «истина» или «ложь» для этого нового параметра при создании диалогового окна на странице.

$(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, - это. Отрицательные поля должны составлять половину вашей высоты и половину вашей ширины. В этом случае мой диалог имеет ширину 720 пикселей и высоту 400 пикселей. Это центрирует его по вертикали и горизонтали.

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