1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>无标题文档</title>
  6 <style type="text/css">
  7 *{ margin:0; padding:0;}
  8 body{ height:2000px;}
  9 #login{ float:right; cursor:pointer;}
 10 .ui-dialog{ width:380px; height:auto; position:fixed; z-index:100; top:100px; left:100px; border:1px solid #d5d5d5; background:#fff; display:none;}
 11 .ui-dialog-title{ height:48px; line-height:48px; padding-left:20px; background:#efefef; cursor:move;}
 12 .ui-dialog-contact{ height:300px; background:#ccc;}
 13 
 14 .closed{ text-decoration:none; color:#000; position:absolute; top:0px; right:20px;}
 15 .ui-mask{ width:100%; height:100%; background:#000; opacity:0.4; filter:Alpha(opacity=40); position:fixed; top:0; left:0; z-index:99; display:none;}
 16 </style>
 17 </head>
 18 
 19 <body>
 20 <p id="login">登录</p>
 21 <div class="ui-dialog" id="dialog">
 22     <div class="ui-dialog-title" id="dialogTitle">登录通行证<a href="#" class="closed" id="closed">关闭</a></div>
 23     <div class="ui-dialog-contact"></div>
 24 </div>
 25 <div class="ui-mask" id="mask" onslectstart='return false'></div>
 26 </body>
 27 </html>
 28 <script type="text/javascript">
 29 
 30 //获取元素对象
 31 function g(id){ return document.getElementById(id);}
 32 
 33 //自动居中 - 把登录浮层，水平和垂直居中在页面当中
 34 function autoCenter(el){
 35     //获取页面可视区的宽度和高度
 36     var bodyW=document.documentElement.clientWidth;
 37     var bodyH=document.documentElement.clientHeight;
 38     
 39     //获取登录浮层的宽度和高度
 40     var elW=el.offsetWidth;
 41     var elH=el.offsetHeight;
 42     
 43     //设置登录浮层在页面当中居中 ，即left和right的值
 44     el.style.left= Math.floor((bodyW-elW)/2) +'px';
 45     el.style.top= Math.floor((bodyH-elH)/2) +'px';
 46     
 47     
 48 };
 49 
 50 //自动全屏 - 把遮罩层放满整个屏幕
 51 function fillToBody(el){
 52     //将传入元素的宽度和高度 设置成 当前可视区的宽度和高度
 53     el.style.widht=document.documentElement.clientWidth +'px';
 54     el.style.height=document.documentElement.clientHeight +'px';
 55 };
 56 
 57 
 58 //推拽  -  三个关键鼠标事件
 59 
 60     //鼠标偏移值
 61     var mouseOffsetX=0;
 62     var mouseOffsetY=0;
 63     //设置一个开关，是否可拖拽的标记
 64     var isDraging=false;
 65     
 66    //1.在标题栏上按下 - 鼠标在标题栏上按下时，要计算鼠标相对拖拽元素的左上角的坐标，并且标记元素为可拖动！
 67    g('dialogTitle').addEventListener('mousedown',function(e){
 68         var e=e||window.event;
 69         //计算鼠标的偏移
 70         mouseOffsetX=e.pageX - g('dialog').offsetLeft;//鼠标事件当时点击时X的坐标 - 登录浮层当前相当于页面左边的位置
 71         mouseOffsetY=e.pageY - g('dialog').offsetTop;
 72         
 73         isDraging=true;//鼠标按下时候，打开开关，标记为可拖拽
 74    });
 75    
 76    // 2.开始移动      -  鼠标开始移动，要检测登录浮层 是否可标记为移动，如果是，则更新元素的位置到当前鼠标的位置。（注意：要减去第一步中获得的偏移）
 77    document.onmousemove=function(e){
 78         var e=e||window.event;
 79         //获得当鼠标移动时候当前的位置
 80         var mouseX=e.pageX;
 81         var mouseY=e.pageY;
 82         
 83         //浮层元素的新位置,用于记录 浮层移动时候的新位置
 84         var moveX=0;
 85         var moveY=0;
 86         
 87         if(isDraging === true){
 88             moveX = mouseX - mouseOffsetX;
 89             moveY = mouseY - mouseOffsetY;
 90             
 91             //范围限定 moveX > 0 并且 moveX < (页面最大宽度 - 浮层的宽度)
 92             //范围限定 moveY > 0 并且 moveY < (页面最大高度度 - 浮层的高度度)
 93             var pageW=document.documentElement.clientWidth;
 94             var pageH=document.documentElement.clientHeight;
 95             
 96             var dialogW = g('dialog').offsetWidth;
 97             var dialogH = g('dialog').offsetHeight;
 98             
 99             var maxX=pageW - dialogW;
100             var maxY=pageH - dialogH;
101             
102             moveX = Math.min(maxX , Math.max(0,moveX));
103             moveY = Math.min(maxY , Math.max(0,moveY));
104 
105             g('dialog').style.left = moveX+'px';
106             g('dialog').style.top = moveY+'px';
107         };
108 
109     };
110    
111    // 3.放开          - 鼠标松开的时候，标记元素为不可拖动状态即可。
112    document.onmouseup=function(){
113       isDraging=false;
114    };
115    
116    //展现登录浮层
117    function show(){
118         g('dialog').style.display='block';
119         g('mask').style.display='block';
120         autoCenter(g('dialog'));
121         fillToBody(g('mask'));
122     };
123     
124     //关闭登录浮层
125     function hide(){
126         g('dialog').style.display='none';
127         g('mask').style.display='none';
128     };
129      
130      //窗口大小改变的事件处理
131      window.onresize = function(){
132         autoCenter(g('dialog'));
133         fillToBody(g('mask'));
134      };
135      
136     g('login').onclick=show;     
137     g('closed').onclick=hide;     
138 
139 </script>