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

  }

}