0

我有以下 HTML：

<div id="modal">
   <div class="block-border" style="width: 900px; height: 450px;">
   xxx
   </div>
</div>

我正在尝试这个脚本：

var modal = document.getElementById('modal');
var modal_width = modal.width;
var modal_height = modal.height;
var window_width = window.width;
var window_height = window.height;
modal.style.left = window_width / 2 - modal_width / 2;
modal.style.top = window_height / 2 - modal_height / 2;

当我检查模态变量时，它看起来是正确的。但是 modal_width 和 modal_height 变量显示未定义。我尝试将宽度和高度样式移动到第一个 div，但我仍然找不到宽度和高度。

4

2 回答 2

2

document.getElementById('modal') 在这种情况下不起作用，因为根本没有id='modal'......只有一个名为“modal”的类

尝试document.getElementsByClassName('modal')[0]...

于 2013-10-28T15:17:53.310 回答
1

再想一想，我的评论是一个答案：p它不应该是！

“宽度”有几种不同的定义，这就是为什么元素不只有width.

您当然可以获得样式定义的宽度：modal.style.width- 但是，请记住，它会在附加单元的情况下返回，因此您可能需要通过
parseInt(modal.style.width,10). 此外，这不包括任何填充或边框样式，如果您使用.left... 除非您也有box-sizing:border-box，否则它只适用于内联样式（您不应该使用）。

总的来说，你可能会更好modal.offsetWidth。此宽度始终包括填充边框，并且对于居中很有用。

也就是说，考虑一个纯 CSS 解决方案：

.modal>div {
    width:900px;
    height:450px;
    position:absolute; /* or "fixed", depending on the desired effect */
    left:0; top:0; right:0; bottom:0;
    margin:auto;
}

一切顺利，无论内容大小如何，这都应该使您的模态框完美居中。嗯……如果内容比屏幕大，也许你会遇到问题，但在大多数情况下，没关系。

于 2013-10-28T15:18:06.223 回答