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"));

? }

}