1 <script type="text/javascript" language="javascript"> 2 var div_x,div_y; 3 var txt = "<span>账号:</span><input class='text1' type='text' id='userid'><span class='span1'id='spuserid'>请输入用户名</span><br/><span>密码:</span><input id='pwd' class='text1' type='password'><span class='span1'>请输入密码</span>"; 4 var ua = navigator.userAgent; 5 var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]'; 6 var isIE= !!window.attachEvent && !isOpera; 7 var isFirefox=ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1; 8 function $(id) { 9 return typeof id==="string"?document.getElementById(id):id; 10 } 11 function ShowAlert() //ShowAlert函数 参数为txt 12 { 13 var s=document.createElement("style");//创建style 14 var shade = document.createElement("div"); //创建遮罩层对象<div> 15 shade.id = "shade"; 16 shade.style.position = "absolute"; 17 shade.style.left = "0px"; 18 shade.style.top = "0px"; 19 shade.style.width = document.documentElement.scrollWidth+"px"; //<div>宽度为body的滚动宽度 20 shade.style.height = document.documentElement.scrollHeight+"px";//<div>高度为body的滚动高度 21 shade.style.background = "#333"; 22 shade.style.textAlign = "center"; 23 shade.style.zIndex = "10000"; //<div>层叠顺序 数字大的会压在数字小的上面 24 shade.style.filter = "alpha(opacity=0)"; //<div>滤镜透明度为0 25 shade.style.opacity = 0; //<div>透明度为0 26 shade.style.MozOpacity=0;//<div>透明度为0 firefox 27 //以上创造了一个遮罩层 28 var alertDiv = document.createElement("div"); //创建弹出层对象<div> 29 alertDiv.id = "alertDiv"; 30 alertDiv.style.position = "absolute"; 31 alertDiv.style.left = ((document.documentElement.clientWidth/2)-225) + "px";//<di浏览器可见区域的一半在减去自身宽度的一半 32 alertDiv.style.top = ((document.documentElement.clientHeight/2)-75) + "px"; //<div> 可以控制弹窗的纵向位置 33 alertDiv.style.width = "450px"; 34 alertDiv.style.height = "150px"; 35 alertDiv.style.background = "#ccc"; 36 alertDiv.style.textAlign = "center"; 37 alertDiv.style.lineHeight = "150px"; 38 alertDiv.style.zIndex = "10002"; //<div>层叠顺序 因为数字大 所有会压在shade这个<div>之上 39 //以上创造了一弹窗的层 40 strHtml = "<ul class='ul1' id='ad'>\n"; 41 strHtml += " <li id='btn' class='li1'>登录</li>\n"; 42 strHtml += " <li class='li2'>" + txt + "</li>\n"; 43 strHtml += " <li class='li3'><input class='do_ok' type='button' value='确 定' id='do_OK' onclick='doOk()' /><input class='do_cancel' type='button' value=' 取 消' id='do_Cancel' onclick='doCancel()' /></li>\n"; 44 strHtml += "</ul>\n"; 45 //以上拼接了弹窗的内容 46 alertDiv.innerHTML = strHtml; //把内容写进弹窗 47 function addstyle(cssStyleText)//添加css样式 48 { 49 if(isIE) 50 { 51 var p=document.createStyleSheet(); 52 p.cssText=cssStyleText; 53 } 54 else 55 { 56 s.type="text/css"; 57 s.appendChild(document.createTextNode(cssStyleText)); 58 document.getElementsByTagName("head")[0].appendChild(s); 59 } 60 }; 61 ( 62 function () 63 { try 64 { 65 var c=[".ul1{list-style:none;margin:0px;padding:0px;100%;border:solid 2px #E6733A;}",".li1{background:#E6733A;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1pxsolid #E6733A;cursor:move;}", 66 ".li2{background:#fff;font-size:12px;height:120px;line-height:60px;}", 67 ".li3{background:#FDEEF4;font-weight:bold;height:25px;line-height:25px;padding-bottom:5px;}", 68 ".do_ok{float:left;margin-left:100px}", 69 ".do_cancel{float:right;margin-right:100px;}", 70 ".text1{margin-left:5px;}", 71 ".span1{margin-left:5px;}" 72 ]; 73 addstyle(c.join("")); 74 75 } 76 catch(e) 77 { 78 } 79 } 80 )(); 81 document.body.appendChild(alertDiv); //添加弹窗层 82 document.body.appendChild(shade); //添加shade遮罩层 83 //这部分用来改变遮罩层的背景颜色 start 84 this.setOpacity = function(obj, opacity) { //构建了一个setOpacity方法 设定透明度 85 if (opacity >= 1) 86 { 87 opacity = opacity / 100; //如果透明度大于1 则透明度等于原来的百分之一 88 } 89 if(isIE)//判断浏览器是否为IE 90 { 91 obj.style.filter="alpha(opacity="+(opacity*100)+")"; 92 } 93 else if(isFirefox)//浏览器为firefox时 94 { 95 obj.style.MozOpacity=opacity; 96 } 97 else//其余情况 98 { 99 obj.style.opacity = opacity; 100 } 101 102 } 103 var c = 0; 104 this.doAlpha = function() { //构建了一个doAlpha方法 用于调整滤镜 105 if (++c > 40) //当c大于40 停止定时器 106 { 107 clearInterval(ad); 108 return 0; 109 } 110 setOpacity(shade, c); //执行setOpacity方法 111 } 112 var ad = setInterval("doAlpha()", 1); //每毫秒 执行doAlpha方法 113 init();//初始化监听函数 114 115 //构建了一个doOk方法 用于点击确定时移除弹出层 116 this.doOk = function() { 117 document.body.removeChild(alertDiv); //移除弹出层 118 document.body.removeChild(shade); //移除遮罩层 119 document.getElementsByTagName("head")[0].removeChild(s); 120 } 121 //构建了一个doCancel 点击取消按钮 122 doCancel = function() { 123 alert('Click the OK Button '); 124 } 125 } 126 127 //事件的绑定 128 function addEventHandler(element, eventName, handler) 129 { 130 if (element.addEventListener)//firefox 131 { 132 element.addEventListener(eventName, handler, false); 133 } 134 else if(element.attachEvent)// for IE 135 { 136 element.attachEvent("on" + eventName, handler); 137 } 138 else// for others 139 { 140 element["on"+eventName]=handler; 141 } 142 } 143 144 function removeEventHandler(element, eventName, handler) 145 { 146 if (element.addEventListener)//for firefox 147 { 148 element.removeEventListener(eventName, handler, false); 149 } 150 else if(element.attachEvent)// for IE 151 { 152 element.detachEvent("on" + eventName, handler); 153 } 154 else// for others 155 { 156 element["on"+eventName]=null; 157 } 158 } 159 function init() { //添加监听事件 160 var btn = $("btn"); 161 this.addEventHandler(btn,"mousedown",mouseDown); 162 this.addEventHandler($("shade"),"mousedown",function(e){ 163 e=e||window.event; 164 e&&e.preventDefault&&e.preventDefault(); 165 166 }); 167 } 168 169 function mouseDown(e) { 170 var e=window.event||e; 171 if(e.preventDefault)e.preventDefault(); 172 var obj =$("alertDiv"); 173 var target = e.srcElement || e.target;//得到触发事件的对象element 174 if(isIE||isFirefox) target.setCapture(); 175 //console.log("left的距离:"+obj.parentNode.offsetLeft+";top的距离:"+obj.parentNode.offsetTop); 176 // console.log("left的距离:"+obj.style.left+";top的距离:"+obj.style.top); 177 div_x=(e.x?e.x:e.pageX)-parseInt(obj.style.left,10);//得到事件发生点的到当前element左外边缘的距离 178 div_y=(e.y?e.y:e.pageY)-parseInt(obj.style.top,10);//得到事件发生点的到当前element上外边缘的距离 179 addEventHandler(document,"mousemove",mouseMoved);//添加鼠标移动时的监听函数 180 addEventHandler(document,"mouseup",mouseUp); 181 } 182 183 function mouseUp(e) { 184 var e=window.event||e; 185 var target = e.srcElement || e.target; 186 if(isIE||isFirefox) target.releaseCapture(); 187 removeEventHandler(document,"mousemove",mouseMoved); 188 removeEventHandler(document, "mouseup",mouseUp); 189 } 190 191 function mouseMoved(e) { 192 var e=window.event||e; 193 var obj = $("alertDiv"); 194 var flag; 195 if(isIE) flag=1; 196 else flag=0; 197 if(e.button==flag) 198 { 199 //alert("clinetLeft="+obj.clientLeft+";offsetLeft="+obj.offsetLeft); 200 obj.style.left=(e.x?e.x:e.pageX)-div_x+"px"; 201 obj.style.top=(e.y?e.y:e.pageY)-div_y+"px"; 202 // console.log("left的距离"+obj.style.left+":"+obj.offsetWidth+":"+document.documentElement.clientWidth+"时件发生"+(e.x?e.x:e.pageX)); 203 if(parseInt(obj.style.left,10)+obj.offsetWidth+24>=document.documentElement.clientWidth) 204 { 205 if(parseInt(obj.style.top,10)<=0) 206 { 207 obj.style.top="0px"; 208 } 209 obj.style.left=(document.documentElement.clientWidth-obj.offsetWidth-4)+"px"; 210 // console.log("left的距离"+obj.style.left); 211 } 212 else if(parseInt(obj.style.left,10)<=10) 213 { 214 if(parseInt(obj.style.top,10)<=0) 215 { 216 obj.style.top="0px"; 217 } 218 obj.style.left="10px"; 219 220 } 221 else if(parseInt(obj.style.top,10)<=0) 222 { 223 obj.style.top="0px"; 224 225 } 226 227 } 228 } 229 230 </script>