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

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

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

Нажмите "пример модального диалога" и измените размер вашего браузера.

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

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

Ответ 1

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

Ответ 2

В качестве альтернативы ответ 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(), возможно, если у вас есть уникальные диалоги, которые вы не хотите касаться.

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

Привет всем!

Решение 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 });
  }
}());