![复制代码](//assets.cnblogs.com/images/copycode.gif)
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;width: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>
![复制代码](//assets.cnblogs.com/images/copycode.gif)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步