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>