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


101

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

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

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

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

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

Ответы:


161

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


спасибо, выглядит отлично. Возможно, мне следовало сказать, что я не всегда знаю идентификатор моего диалога, например (как я могу настроить таргетинг на этот диалог?): Var $ dialog = $ ('<div> <a href = "#" title = "Отмена"> Отмена </a> </a> </div> ') .html (assetBrowser) .dialog ({autoOpen: false, title:' Assets Manager ', модальное окно: true, closeOnEscape: true, кнопки: кнопки, ширина: 840, высота: 500}); $ dialog.dialog ('открыть');
Jorre

11
@Jorre - Все они получают один и тот же класс, когда вы создаете диалог, чтобы сделать его универсальным, вы можете сделать это:, $(".ui-dialog-content").dialog("option", "position", "center");это будет проверять любой диалог :)
Ник Крейвер

3
К сожалению, предложенный ответ плохо влияет на изменение размера диалога. Когда вы пытаетесь изменить его размер с помощью ручки SE, диалоговое окно изменяется со всех 4 сторон.

2
Я рекомендую регулировать или отклонять событие изменения размера. Я видел, как IE7 и IE8 перемещают диалог «за пределы» области просмотра из-за того, что обработчик изменения размера выполняется слишком много раз.
BStruthers

2
В более новых версиях пользовательского интерфейса jQuery мне нужно было использовать {my: "center", at: "center", of: window} вместо "center". Я использую 1.11.0.
Майк Доттерер,

20

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

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

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


использование класса .ui-dialog-content предназначено для всех диалогов, принятый ответ - для конкретного диалога
Пьер

Ах да. Сожалею. С первого взгляда не заметил различия в редактировании.
Ellesedil 06

Я использую этот подход полууспешно. Он работает так, как рекламируется, но мобильное сафари iOS 7 действительно подавляется, если клавиатура поднята. Я попытался размыть () ввод, но Gingerbread видит клавиатуру как событие изменения размера и застревает в цикле, который никогда не разрешает ввод ввода. Кто-нибудь еще сталкивается с этим?
Джозеф Юнке

Возможно, добавьте счетчик снаружи .resize()и внутри, если счетчик достигнет 10или 20тогда break;, у меня не было этой проблемы, я не обслуживаю эти устройства / браузеры. Вы должны попробовать решение, из которого можно выйти, если оно застряло,
Пьер

Ваше первое предложение сработало, а ответ @Ellesedil - нет.
akousmata

13

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

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


Этот аддон / редактирование, похоже, больше не работает с июля 2014 года. Ответ от @Pierre все еще работает.
degenerate

@degenerate: возможно, что обновления jQuery могут потребовать небольших изменений синтаксиса. Я больше не работаю и даже не имею доступа к проекту, в котором я это реализовал (на самом деле, сейчас я пишу API), поэтому у меня нет простого способа определить, нужны ли какие-либо изменения для последних версий jQuery.
Ellesedil

Этот ответ не работает для последних версий. Но идея отличная. Это содержимое моего обработчика изменения размера окна: $(".ui-dialog-content:visible").each(function () { if ($(this).dialog('option', 'autoReposition')) { $(this).dialog('option', 'position', $(this).dialog('option', 'position')); } });он отлично работает :)
nacho4d

@ nacho4d: Не стесняйтесь редактировать ответ и добавлять новый код для любой версии jquery, с которой вы работаете, внизу.
Ellesedil

1
@Ellesedil Я только что изменил пару строк в вашем первом фрагменте кода. Собственно это то, что scott.gonzalez написал первым в ветке. Не знаю, почему он перешел $( "#dialog" ).dialog( "option", "position" ) на $(this).data("dialog").options.positionпотом. В любом случае, теперь этот ответ работает!
nacho4d

2

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

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

2

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

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

0

Всем привет!

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

$.isVanillaJS == false
Эндрю
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.