Question

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

position: "top"

所以至少它会粘在视口的顶部。当我使用中心选项时，它只使用50％的高度作为顶级属性。由于我的页面大约是7000px，因此它远离视口，用户无法看到它。

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

我也尝试将它居中到叠加层，但由于ui-overlay元素在模态初始化之前不存在，所以我无法将它用作射手进行居中。

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

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）;要居中的东西通常是显示：无;在页面的某个地方。你展示它并使它居中等等。

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

我还将其中一个用于捕捉窗口滚动事件并进行相应调整。

jQuery UI对话位置固定中心

1 个答案: