Question

我正在使用大量现有代码库，其中包含大量遗留代码，我无法更改。我的任务是升级到UI库的1.8版本。我遇到了jquery.ui.dialog（）元素定位的问题。

整个网站都是通过javascript加载的（我猜这是现在风靡一时）。大量的HTML被动态加载，导致对话框出现定位问题。以前该网站使用自定义css位置：相对于确保所有对话框都定位正常。

对话框的设置如下：

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

使用UI 1.8，dialog（）的工作方式发生了变化，从而破坏了这种行为： http://jqueryui.com/docs/Upgrade_Guide/1.8.6

不要在打开时更改DOM位置

对话框不再被移动   它们被打开时的DOM。唯一的   现在移动对话框的时间是   附加到的初始化   身体。这修复了一大堆   问题，例如表单元素   重置，iframe重新加载等

所有的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)
    })
});

如何附加到所有Jquery.UI.dialog打开事件以在打开时动态调整对话框大小？

2 个答案: