Как прикрепить ко всем событиям открытия Jquery.UI.dialog динамическое изменение размера диалога при открытии?

Question

Я работаю с большой существующей кодовой базой с тоннами устаревшего кода, который я не могу изменить.Моя задача - обновить версию библиотеки UI до версии 1.8.У меня проблемы с позиционированием элемента jquery.ui.dialog ().

Весь сайт загружается с помощью javascript (который, я думаю, сейчас в моде).Тонны HTML загружаются динамически, что вызывает проблемы позиционирования в диалоговом окне.Ранее сайт использовал пользовательскую позицию CSS: относительно того, чтобы убедиться, что все диалоги были расположены нормально.

Диалоги настроены так:

    $('#deletingDialog').dialog({ autoOpen: false, modal: true, position: 'center' });

В пользовательском интерфейсе 1.8 произошли измененияв способе dialog (), который нарушает это поведение: http://jqueryui.com/docs/Upgrade_Guide/1.8.6

Не изменять позицию DOM при открытии

Диалоги больше не перемещаются в DOM, когда ониоткрыт.Единственный раз, когда диалог перемещается сейчас, это во время инициализации, когда он добавляется к телу.Это устраняет множество проблем, таких как сброс элементов формы, перезагрузка iframes и т. Д.

Весь код установки dialog () очень рано связан с элементами html и находится в нескольких разных местах.В идеальном мире я смог бы попасть туда и изменить все вызовы диалогов, чтобы они были связаны с поздним связыванием, и только настройку прямо перед тем, как предполагается открыть диалог.Это, скорее всего, решит проблему.К сожалению, изменение всего этого кода на самом деле непозволительно и демонстративно не вариант.

Я думаю, что подключиться к событию открытия диалога http://jqueryui.com/demos/dialog/#event-open и сбросить позицию прямо перед тем, как модальное окно действительно откроется.

Так что я могу найти все элементы с помощью диалоговых окон, а затем связать их с помощью $( ".selector" ).bind( "dialogopen" и т. Д. И т. Д. Или подключиться к событию глобально (предпочтительно).Либо мне нужен способ сказать «дай мне все элементы с вложенным диалогом», либо «всегда делай этот код, когда происходит событие открытия.

Есть идеи?

Answer 1

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

Я думаю, что твоя первая идеяиспользования селектора для выбора всех элементов, с которыми связан виджет диалога. Это должно быть относительно просто - class ui-dialog-content применяется к каждому элементу, к которому применяется виджет диалога (оболочка divвставляется вокруг содержимого). Таким образом, ваш код будет:

$(".ui-dialog-content").bind("dialogopen", function() {
    // Reposition dialog, 'this' refers to the element the even occurred on.
    $(this).dialog("option", "position", "top");  
});

Надеюсь, это поможет.

Answer 2

Это мое решение

// repositioning of all rising dialogs
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
    var t = $(event.currentTarget), w = $(window);

    $(this).css({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    })
});