window.onload=function(){
var btnLoad=document.getElementById("btnLoad");
btnLoad.onclick=function(){
showDialog();
var btnOnClose=document.getElementById("btnOnClose");
btnOnClose.onclick=function(){
hideDialog();
}
}
//获取元素对象
function g(id){
return document.getElementById(id);
}
//自动居中
function autoCenter( el ){
//获得可视区的宽度高度
var bodyW=document.documentElement.clientWidth||document.body.clientWidth;
var bodyH=document.documentElement.clientHeight||document.body.clientHeight;
//获得元素的宽度高度
var elW=el.offsetWidth;
var elH=el.offsetHeight;
//可视区的宽度高度减去元素的宽度高度/2
el.style.left = ( bodyW - elW ) / 2 + 'px';
el.style.top = ( bodyH - elH ) / 2 + 'px';
}
//自动全屏
function fillToBody( el ){
el.style.width=document.documentElement.clientWidth||document.body.clientWidth;
el.style.height=document.documentElement.clientHeight||document.body.clientHeight;
}
mouseOffsetX=0
mouseOffsetY=0;//偏移量
isDraging=true;
//鼠标事件1:在标题栏按下要计算鼠标相对于拖拽元素左上角的位置,并且标记元素为可拖动
g("dialogTitle").onmousedown=function( e ){
var e= e || window.event;
var mouseOffsetX=e.pageX-g("dialogTitle").offsetLeft;
var mouseOffsetY=e.pageX-g("dialogTitle").offsetTop;
isDraging=true;
}
//鼠标事件2:鼠标移动时要监测元素是否为可拖动,如果是则更新元素的位置,到当前元素的位置
document.onmousemove=function( e ){
var e= e ||window.event;
var mouseX=e.pageX;
var mouseY=e.pageY;//鼠标当前的位置
var moveX=0;
var moveY=0;//浮层元素的新位置
if(isDraging===true){
var moveX=mouseX-mouseOffsetX;
var moveY=mouseY-mouseOffsetY;
//范围限定 moveX>0,并且moveX<(页面最大宽度-浮层元素的宽度)
var pageWidth=document.documentElement.clientWidth||document.body.clientWidth;
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
var dialogWidth=g("dialog").offsetWidth;
var dialogHeight=g("dialog").offsetHeight;
var maxX=pageWidth-dialogWidth;
var maxY=pageHeight-dialogHeight;
moveX=Math.min( maxX, Math.max(0,moveX));
moveY=Math.min( maxY, Math.max(0,moveY));
g("dialog").style.left=moveX+'px';
g("dialog").style.top=moveY+'px';
}
}
//鼠标事件3:鼠标松开时要标记元素为不可拖动
document.onmouseup=function(){
isDraging=false;
}
//展现登录浮层
function showDialog(){
g("dialog").style.display="block";
g("mask").style.display="block";
autoCenter("dialog");
fillToBody(g("mask"));
}
function hideDialog(){
g("dislog").style.display="none";
g("mask").style.display="none";
}
window.onresize=function(){
autoCenter(g("dialog"));
fillToBody(g("mask"));
}
}
完全没明白的啥意思