0

I'm trying to display the dialog in modal mode at the center of the page with position fixed, but I'm not able to get it to work properly. As a workaround, I currently set

position: "top"

so at least it's stuck to the top of the viewport. When I use center option, it simply uses the 50% of the height as top property. Since my pages are around 7000px, it's way out of the viewport and user is not able to see it.

Does anyone have a good suggestion on how to achieve this? I have tried CSS option, but since top property is set dynamically, CSS is simply not taking any effect.

I have also tried centering it to the overlay, but since ui-overlay element doesn't exist until the modal is initialized, I'm not able to use it as an archer for centering.

Just FYI, I'm trying to do this as a workaround for positioning bug of link widget of hallojs.

4

1 回答 1

0

你可以把它放在窗口的中心。我做了一个 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; 页面某处。您将其显示并居中，等等。

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

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

于 2014-01-13T20:00:44.487 回答