jQuery UI 对话框位置固定中心

Question

我试图在页面中心以模式模式显示对话框，位置固定，但我无法让它正常工作。作为一种解决方法，我目前设置了

position: "top"

所以至少它被固定在视口的顶部。当我使用中心选项时，它只是使用高度的 50% 作为顶部属性。由于我的页面约为 7000 像素，因此它超出了视口，用户无法看到它。

有没有人对如何实现这一点有好的建议？我试过 CSS 选项，但由于 top 属性是动态设置的，CSS 根本没有任何效果。

我也尝试过将其居中到叠加层，但由于 ui-overlay 元素在模态初始化之前不存在，因此我无法将其用作居中的弓箭手。

仅供参考，我正在尝试将其作为定位 hallojs 链接小部件错误的解决方法。

Answer 1

你可以把它放在窗口的中心。我做了一个 jQuery 方法来处理它。不知道为什么你需要它有一个固定的位置，除非你希望用户仍然能够滚动显示模式的窗口？这是 jQuery 居中扩展：

(function($)
{
$.fn.centerMe = function(centerIn)
{
    var containerWidth = $(centerIn).width();
    var containerHeight = $(centerIn).height();
    var elWidth = $(this).width();
    var elHeight = $(this).height();
    $(this).css('left', containerWidth / 2 - elWidth / 2);
    var adjTop = containerHeight / 2 - elHeight / 2;
    $(this).css('top', $(parent.window.document).scrollTop() + adjTop);
};
})(jQuery);

用法是 $('#myToBeCenteredElement').centerMe(window);要居中的东西通常是 display:none;页面某处。您将其显示并居中，等等。

要居中的元素需要有绝对定位。

我还把它做成了另一个来捕捉窗口滚动事件并进行相应的调整。