最终效果如下:
(个人方法)
实现思路:
关于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