javascript - jQuery UI 对话框位置固定居中

Question

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

position: "top"

所以至少它会卡在视口(viewport)的顶部。当我使用 center 选项时，它只使用 50% 的高度作为 top 属性。由于我的页面大约为 7000 像素，它超出了视口(viewport)，用户无法看到它。

有没有人对如何实现这一目标有好的建议？我已经尝试过 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;页面上的某处。你展示它并将它居中，等等。

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

我还制作了其中的另一个以捕获窗口滚动事件并进行相应调整。