JS 弹出层这个比较实用_js 好用的弹出层-CSDN博客

弹出层测试

名称：
密码：

一个简单的JS弹出层

基本功能

//主函数 id:内容,strTitle:标题,fn_msgBoxBack:关闭时回调函数,notShowClose:是否隐藏关闭按钮

function msgBox(id, strTitle, fn_msgBoxBack, hideClose)

//主函数 id:内容ID,strTitle:标题,fn_msgBoxBack:关闭时回调函数,notShowClose:是否隐藏关闭按钮

msgBox(id, strTitle, fn_msgBoxBack, hideClose)

msgBox_close() 关闭对话框

msgBox_alert(strAlert, strTitle) 提示框

msgBox_loading(strAlert, strTitle) 加载中

快捷键ESC关闭对话框

兼容 IE、FireFox、Chrome

主要遇到的问题

取父节点应当使用 div.parentNode;

取鼠标位置

 
         onmousedown= 
         "msgBox_moveStart(event);" 
        
         function 
         msgBox_moveStart(evt){ 
        
         　　evt = evt ? evt : (window.event ? window.event : 
         null 
         ); 
        
         　　msgBox_mouseX = evt.clientX; 
        
         　　msgBox_mouseY = evt.clientY; 
        
         }

style.left、style.top、style.width、style.height 附值时，应当加上 px

div.style.left = left + 'px';

添加事件

 
         if 
         (isIE){ 
        
         　　document.attachEvent( 
         'onmousemove' 
         , msgBox_move); 
        
         } 
         else 
         { 
        
         　　document.addEventListener( 
         'mousemove' 
         , msgBox_move, 
         false 
         ); 
        
         }

获取页面总宽度（包含非可见区域）document.documentElement.scrollWidth

透明度

 
         if 
         (isIE){ 
        
         　　div.style.filter = 
         'Alpha(opacity=20)' 
         ; 
        
         } 
         else 
         if 
         (navigator.userAgent.indexOf( 
         "Chrome" 
         ) > -1) 
         //判断是否Chrome{  
        
         　　div.style.opacity = 0.2; 
        
         } 
         else 
         { 
        
         　　div.style.MozOpacity = 0.2; 
        
         }