0

我正在使用某种覆盖来声明正在加载页面（或某些元素）。我正在尝试定位显示div：“正在加载...”位于页面或目标元素的中心。

这是我的方法，但它根本不起作用......

var left, top,
    position = 'fixed';

if (this.container !== 'body'){
  position = 'absolute';
}

left = (window.innerWidth - this.element.offsetWidth) / 2;
top = (window.innerHeight/2) - (this.element.offsetHeight/ 2);

this.modal.style.left = left + 'px';
this.modal.style.top = top + 'px';
this.modal.style.position = position;

请声明没有 jQuery，我不打算使用 jQuery。

4

3 回答 3

1

如果你要对所有动作通知使用相同的 div，我的意思是不同的元素，但相同的 div，如果不使用 JS，你将无法做到这一点。但至少 jQuery 会让编码变得更容易：

您可以.offset找出当前元素相对于整个文档的位置，并.height()使用.width()of 元素来计算弹出坐标。

于 2013-09-17T11:15:04.030 回答
0 
Use css to center the "cover" over the loading part, then use jquery to hide the "cover" div when completed.

<html>
    <style>
        #outer
        {
            position: absolute;
            left: 10px;
            top: 10px;
            height: 300px;
            width: 300px;
            border: 1px solid black;
            background-color: red;
        }

        #loading
        {
            position: absolute; 
            background-color: blue; 
            width: 200px; 
            height: 200px; 
            margin-left: -100px; 
            left: 50%; 
            margin-top: -100px; 
            top: 50%;
            border: 1px solid black;
        }
    </style>
    <script src="jQuery.js"></script>
    <script>
        $(document).ready(function() {
            $("#loading").hide();
        });
    </script>
    <div id="outer">
        <div id="loading">

        </div>
    </div>
</html>
于 2013-09-17T11:18:04.233 回答
0

终于想通了：

var left, top,
    position = 'fixed';

if (this.container !== 'body'){
  position = 'absolute';
}
var rect = this.element.getBoundingClientRect();

left = Math.round(((rect.width - this.modal.offsetWidth) / 2) + rect.left);
top = Math.round(((rect.height - this.modal.offsetHeight) / 2) + rect.top);

this.modal.style.left = left + 'px';
this.modal.style.top = top + 'px';
this.modal.style.position = position;

这将使元素在给定元素内正确居中。

于 2013-09-17T13:40:25.060 回答