JS_实时检测窗口大小并保持登陆框居中

最终效果如下：

（个人方法）
实现思路：
关于onresize事件：

 
关于检测浏览器窗口宽度和高度的方法：
document.documentElement.clientWidth;    //获取浏览器窗口宽度
document.documentElement.clientHeight;    //获取浏览器窗口高度

登陆框窗口宽度高度事先已设置，这里设高度为H，宽度为W，id为login。(利用left和top设置登陆框位置，需设置登陆框position为absolute)

当浏览器窗口大小改变时，触发onresize事件，然后执行JavaScript代码。通过数学计算，保持登陆框的水平和垂直位置居中。
JS代码部分：
window.onload=function(){
    var login=document.getElementById('login');
    var winWidth=document.documentElement.clientWidth;    
    var winHeight=document.documentElement.clientHeight;
    login.style.left=(winWidth-W)/2+'px';
    login.style.top=(winHeight-H)/2+'px'; 
 //以上设置登陆框弹出时位置，保证弹出后，登陆框位置居中。
    
    window.onresize=function(){
           var login=document.getElementById('login');
            var winWidth=document.documentElement.clientWidth;
            var winHeight=document.documentElement.clientHeight;
            login.style.left=(winWidth-W)/2+'px';
            login.style.top=(winHeight-H)/2+'px';
    }
//利用onresize事件，当窗口大小改变时，执行函数。
//函数为，获取当前窗口宽度和高度，然后计算使登陆窗口居中。
}

测试环境： IE11、chrome 56.0.2914.87(64bit)、safari 5.1.7(7534.57.2) 

转载于:https://my.oschina.net/microlv/blog/848970