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;
}
实例及源码 下载