使用JavaScript模仿消息提示框效果（兼容IE6+，FireFox）

DK 于2009,12,09发表 | 2 评论 »

最近由于项目需求，不能使用框架，所以自己写了一个比较通用的提示框效果。主要是实现了组件化，兼容主流浏览器，并采用CSS+DIV布局。整个效果中没有使用图片，所以在各种提示情况下均适用。

只要在页面中引用相关的文件，调用MessageBox.showMessage()方法即可显示提示窗口。废话不多说先看效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{font-size:12px; line-height:24px;} /*背景图层样式*/ #maskDiv{position:absolute; top:0; left:0;filter:alpha(opacity=30);-moz-opacity:0.3; opacity:0.3; background:#000; z-index:9990;} /*信息窗口样式*/ #messageBox{width:308px;position:absolute;background:#e3f1ff; border:solid 1px #b3d7ff;opacity:1; z-index:9999;-moz-border-radius:3px;-webkit-border-radius:3px;} /*信息标题样式*/ #messageBoxTitle{height:20px; padding:4px;cursor:move;} #messageBoxTitle span{float:left;} #messageBoxTitle input{float:right; background:#e3f1ff; border:none; color:#96caff; font-size:12px;} #messageBoxTitle input:hover{ background:#f00; color:#fff;-moz-border-radius:3px;-webkit-border-radius:3px;} /*详细内容样式*/ #messageContainer{padding:12px 4px;/*padding-left:90px;*/ background:#eef7ff; margin:0 4px; border:1px solid #fff;-moz-border-radius:2px;-webkit-border-radius:2px;} #messageBoxFoot{position:relative; height:20px; padding:4px;} #messageBoxFoot input{float:right; border:1px solid #fff;-moz-border-radius:3px;-webkit-border-radius:3px; background:#c0ddfb; line-height:24px;} </style> <script> /* 设计制作：DK 来源：http://www.dklogs.net 日期：2009/12/9 */ var pageObject=new Object(); //用于获取当前窗口的真实宽度和高度 pageObject.getClientWidth=function(){ ovar winWidth=0; o//获取窗口宽度 oif (window.innerWidth) owinWidth = window.innerWidth; oelse if ((document.body) && (document.body.clientWidth)) owinWidth = document.body.clientWidth; //通过深入Document内部对body进行检测，获取窗口大小 oif (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) o{ owinWidth = document.documentElement.clientWidth; o} //结果输出至两个文本框 oreturn winWidth; } pageObject.getClientHeight=function(){ ovar winHeight=0; o//获取窗口高度 oif (window.innerHeight) owinHeight = window.innerHeight; oelse if ((document.body) && (document.body.clientHeight)) owinHeight = document.body.clientHeight; o//通过深入Document内部对body进行检测，获取窗口大小 oif (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) o{ owinHeight = document.documentElement.clientHeight; o} oreturn winHeight; } //兼容FF和IE的事件，当e未定义的时候返回window.event pageObject.dEvent=function(e) { oif(!e) o{ oreturn window.event; o} oelse o{ oreturn e; o} } //定义提示框对象 var MessageBox=new Object(); //初始化对话框的DOM对象，并设置相关的样式 MessageBox.init=function(meg,title){ o//覆盖背景，将当前页面其他内容覆盖 othis.background=document.createElement("div"); othis.background.id="maskDiv"; othis.background.style.width=pageObject.getClientWidth()+"px"; othis.background.style.height=pageObject.getClientHeight()+"px"; o//标题，对话框标题容器 othis.titleContainer=document.createElement("div"); othis.titleContainer.id="messageBoxTitle"; o//对话框标题内容，如果为空则自动显示“消息” othis.titleStr; oif(title==null) othis.titleStr="消息"; oelse othis.titleStr=title; othis.titleObj=document.createTextNode(this.titleStr); othis.titleSpan=document.createElement("span"); othis.titleSpan.appendChild(this.titleObj); othis.titleContainer.appendChild(this.titleSpan); othis.closeBtn=document.createElement("input"); othis.closeBtn.id="closeBtn"; othis.closeBtn.type="button"; othis.closeBtn.value="X"; othis.titleContainer.appendChild(this.closeBtn); o//消息内容 othis.messageContainer=document.createElement("div"); othis.messageContainer.id="messageContainer"; othis.messageStr=meg; othis.messageObj=document.createTextNode(meg); othis.messageContainer.appendChild(this.messageObj); othis.footContainer=document.createElement("div"); othis.footContainer.id="messageBoxFoot"; o//确定按钮 othis.confirmBtn=document.createElement("input"); othis.confirmBtn.type="button"; othis.confirmBtn.id="okBtn"; othis.confirmBtn.value="确定"; othis.footContainer.appendChild(this.confirmBtn); o//消息框的整体 othis.messageBox=document.createElement("div"); othis.messageBox.id="messageBox"; o//对话框的定位，根据宽度和高度自动生成定位 othis.messageBox.style.top=parseInt(pageObject.getClientHeight())/2-100+"px"; othis.messageBox.style.left=parseInt(pageObject.getClientWidth())/2-150+"px";var offsetTop=messageBox.offsetTop; o//当鼠标移动到时候对话框跟随鼠标移动，为了防止作用的区域过小对话框移动出问题，这个地方选择了对body对象注册mousemove事件 odocument.body.onmousemove=function(e){ o//下面的4句代码没有实际作用可以删除，为了在页面上体现鼠标坐标值的变化值 odocument.getElementById("nowx").value=pageObject.dEvent(e).clientX-startX; odocument.getElementById("nowy").value=pageObject.dEvent(e).clientY-startY; odocument.getElementById("elementLeft").value=parseInt(messageBox.style.left); odocument.getElementById("elementTop").value=parseInt(messageBox.style.top); o//设置对话框的具体坐标 omessageBox.style.top=offsetTop+pageObject.dEvent(e).clientY-startY+"px"; omessageBox.style.left=offsetLeft+pageObject.dEvent(e).clientX-startX+"px"; o} o//当鼠标释放即mouseup事件触发后注销body的mousemove事件同时注销body的mouseup事件自身，以防止事件污染 odocument.body.onmouseup=function(){ o//alert("Cancle"); odocument.body.onmousemove=null; odocument.body.onmouseup=null; o} o} o o} //对话框释放函数 MessageBox.dispose=function(){ ovar background=document.getElementById("maskDiv"); ovar messageBox=document.getElementById("messageBox"); odocument.body.removeChild(background); odocument.body.removeChild(messageBox); o} </script> </head> <body> <input type="button" name="btn" id="btn" value="点击弹出窗口" onclick="MessageBox.showMessage('欢迎您访问www.dklogs.net，这是DK写的Javascript模拟提示框的效果,实现了组件化，只要引用相关的Javascript文件和css样式表，即可通过调用MessageBox.showMessage()方法打开对话框。DKlogs愿与您共同进步^_^','你好！');" /> 当前鼠标移动的X坐标差 <input type="text" id="nowx" /> 当前鼠标移动的Y坐标差 <input type="text" id="nowy" /> 当前对话框的X坐标值<input type="text" id="elementLeft" /> 当前对话框的Y坐标值<input type="text" id="elementTop" /> </body> </html>

代码比较简单，所有的代码我都已经加入到注释，用起来应该很方便。

主要的的MessageBox对象有三个方法，init()、showMessage()、dispose(),分别负责弹出对话框的初始化，消息显示以及消息框的可拖动，消息框关闭。

代码中还用到了如何获取当前窗口的真实高度和宽度的方法以及判断FF与IE之间Event对象的不同之处。

演示文件地址：JavaScript提示框

完整zip下载：JavaScript提示框V1

设计编写：DK 转载请注明出处：http://www.dklogs.net

转载请注明原文出处《使用JavaScript模仿消息提示框效果（兼容IE6+，FireFox）》如无特别声明，所有文章均遵守创作共用署名－非商业－禁止演绎 3.0协议。

标签: css, div, javascript, 提示窗口, 浏览器兼容, 编程 | 分类： Javascript, 编程 |

2条回复发表于 “使用JavaScript模仿消息提示框效果（兼容IE6+，FireFox）”上

JavaScript弹出窗口控件 | z-Index says:

2011/08/07 at 1:53 pm

[…] 使用JavaScript模仿消息提示框效果（兼容IE6+，FireFox） […]
JavaScript弹出窗口控件 | DKlogs -- 设计 | 生活 says:

2012/11/28 at 12:28 am

[…] 使用JavaScript模仿消息提示框效果（兼容IE6+，FireFox） […]

dklogs