JS 弹出层

弹出层测试

名称：
密码：

一个简单的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;
}

 

实例及源码 下载