javascript - 在屏幕中央设置弹出 div

Question

我正在创建一个弹出 div。它的大小为 521 像素，高度为 400 像素。

现在我想将它设置为显示在屏幕或浏览器窗口的中心，而不管浏览器窗口的大小。

这是我的 JavaScript 代码：

<script type="text/javascript">
function show_update_profile()
   {
       document.getElementById('black_fade').style.display='block';
       var dw = document.getElementById('div_register').style.width;
       alert(dw);
       document.getElementById('div_register').style.left= ((window.innerWidth)-dw)/2;
   }
</script>

该行alert(dw);显示 div 宽度，但之后的行不起作用。

Answer 1

应该：

//remove extra dot
document.getElementById('div_register').style.left= ((window.innerWidth)-dw)/2;

Answer 2

dw是一个以px;结尾的字符串 您需要先调用parseInt它以自行获取号码。然而，使用 JavaScript 解决一个可以通过 CSS 轻松解决的问题还有很长的路要走：

#div_register {
    left: 50%;
    top: 50%;
    margin: -200px -260px;
}

Answer 3

alert(dw) 的输出是什么？如果这包含一些测量单位（如“123px”），则需要在计算中使用它之前将其解析为 int：

var dw = parseInt(document.getElementById('div_register').style.width);