j查询 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）; 要居中的事物通常是显示：无;页面上的某个地方。 你展示它并居中它，等等。

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

我还将其作为其中的另一个来捕获窗口滚动事件并相应地进行调整。