javascript实现简单的弹出层以及拖拽功能（支持firefox、IE7.0以上、oprea、chrom）

  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>