Question

我正在创建一个弹出式叠加模式，并且在定位/滚动工作正常时遇到问题。

我可以将我的模态设置为position:fixed但是如果模态的高度太大，那么模态会从窗口溢出，你无法看到它的底部。

如果我将模态设置为position:absolute，那么元素相对于最近的祖先position:relative定位，是吗？（或者至少那是它看起来做的事情）相反，我希望模态始终相对于窗口，以便我可以轻松地将其集中。

是否有办法使下面的.modal相对于窗口（或元素）定位，即使该元素嵌套在DOM内部，如下所示：

<body ng-app="myapp" ng-controller="mycontroller">
<div>
    <div>
         <div ui-view>
              <div class=".modal"></div>
         </div>
    </div>
</div>
</body>

Answer 1

如果坚持使用相同的标记并以相同的方式嵌套，那么最好的选择是使用JavaScript。

这里有一些JS代码，它提供了一种很好的方法来完成你的要求：

function ShowDivInCenter()
{
    try
    {
        divWidth = 100;
        divHeight = 100;
        divId = 'divLogin'; // id of the div that you want to show in center

        // Get the x and y coordinates of the center in output browser's window 
        var centerX, centerY;
        if (self.innerHeight)
        {
            centerX = self.innerWidth;
            centerY = self.innerHeight;
        }
        else if (document.documentElement && document.documentElement.clientHeight)
        {
            centerX = document.documentElement.clientWidth;
            centerY = document.documentElement.clientHeight;
        }
        else if (document.body)
        {
            centerX = document.body.clientWidth;
            centerY = document.body.clientHeight;
        }

        var offsetLeft = (centerX - divWidth) / 2;
        var offsetTop = (centerY - divHeight) / 2;

        // The initial width and height of the div can be set in the
        // style sheet with display:none; divid is passed as an argument to // the function
        var ojbDiv = document.getElementById(divId);

        ojbDiv.style.position = 'absolute';
        ojbDiv.style.top = offsetTop + 'px';
        ojbDiv.style.left = offsetLeft + 'px';
        ojbDiv.style.display = "block";
    }
    catch (e) {}
}

然后，您可以通过任何事件调用该函数，例如：

<body onload='ShowDivInCenter();' onresize='ShowDivInCenter();'>

如果你想要它是动态的。

如何将元素绝对定位到窗口而不管其DOM位置如何？

1 个答案: