大家好，我们平时在使用Javascript的时候，经常会需要给用户提供一些反馈信息，完成这个功能有很多种方法。但在平时开发中午我们用的最多的可能就是alert这个函数了(这里只说一般情况，不排除个别高手～)，使用这个函数确实很方便，可以很简单的向用户提供一些交互信息。不过它也有很多不足，比如他的外观很简
单，而且不可控制，再有它属于浏览器级别的函数，是由各个浏览器自己实现的，所以在不同的浏览器上面，它的界面都不太一样。如果是在以前，这种情况或许很容
易被大多数用户所接受，不过随着时间的推移，用户越来越希望得到更好的体验。所以现在大家经常会在很多网站上看到JS做出来的各种对话框，这些界面会是用户体
验提升不少，所以今天就说说关于这方面的内容吧，进入正题，不说废话啦～
首先给大家看看效果，先有一个直观的了解：
如上图所示，经过我的测试，这个对话框可以使用在IE6 7 8，Firefox，Chrome等多个主流浏览器中。下面就和大家一起看看他的代码吧。
首先，我们需要判断浏览器的类型，这里用了几个bool变量来代表不同的浏览器。
复制代码 代码如下:
var springweb_typeIsIE = false;
var springweb_typeIsGecko = false;
var springweb_typeIsWebkit = false;
var springweb_typeIsIE6 = false;
var springweb_typeIsIE7 = false;
var springweb_typeIsIE8 = false;
var springweb_typeIsFireFox = false;
var springweb_typeIsChrome = false;
var springweb_typeIsSafari = false;
var agent = window.navigator.userAgent;
if (agent.indexOf("MSIE 6") != -1) {
springweb_typeIsIE6 = true;
springweb_typeIsIE = true;
}
else if (agent.indexOf("MSIE 7") != -1) {
springweb_typeIsIE7 = true;
springweb_typeIsIE = true;
}
else if (agent.indexOf("MSIE 8") != -1) {
springweb_typeIsIE8 = true;
springweb_typeIsIE = true;
}
else if (agent.indexOf("Firefox") != -1) {
springweb_typeIsFireFox = true;
springweb_typeIsGecko = true;
} else if (agent.indexOf("Chrome") != -1) {
springweb_typeIsChrome = true;
springweb_typeIsWebkit = true;
}
else if (agent.indexOf("Safari") != -1) {
springweb_typeIsSafari = true;
springweb_typeIsWebkit = true;
}
如上所示，这里通过检测agent头来判断不同的浏览器，这是一个比较简单的判断方法。
下面开始构造我们的对话框，在构造对话框前，我们先要制造一种模态窗体的效果（就是当对话框弹出来的时候，用户不能操作页面上的其余内容），这里我们就用一个黑色的透明层来完成这样的效果。
复制代码 代码如下:
document.body.style.overflowY = "hidden";
var divBackground = document.createElement("div");
divBackground.style.position = "absolute";
divBackground.style.left = "0px";
divBackground.style.top = "0px";
divBackground.style.width = "100%";
divBackground.style.height = "100%";
if (springweb_typeIsChrome || springweb_typeIsFireFox) {
divBackground.style.backgroundColor = "rgba(0,0,0,0.7)";
} else {
divBackground.style.backgroundColor = "#000000";
divBackground.style.filter = "alpha(opacity=70)";
}
divBackground.style.zIndex = "99";
document.body.appendChild(divBackground);
上面的代码，我们首先将浏览器的滚动条禁止，以防止用户在弹出对话框的时候滚动浏览器窗口，接下来设定相应的样式，一个比较重要的就是8-13行，这里根据浏览器的类型来应用不同的CSS样式来达到透明的效果，对于IE浏览器，我们使用IE自带的滤镜功能，而对于其他浏览器，我们使用基于CSS3的rgba方式实现透明效果。
接下来，我们要构造对话框，这里首先创建了一个div层，来代表我们整个对话框。方法如下：
复制代码 代码如下:
var dialogWidth = 260;
var dialogHeight = 120;
var fontSize = 14;
var lineWidth = document.body.clientWidth * 0.7;
if ((fontSize * msg.length) < lineWidth) {
dialogWidth = parseInt(fontSize * msg.length) + 50;
} else {
dialogWidth = parseInt(lineWidth);
dialogHeight += parseInt(((fontSize * msg.length) / lineWidth) * fontSize);
}
divDialog.style.width = dialogWidth + "px";
divDialog.style.height = dialogHeight + "px";
divDialog.style.position = "absolute";
divDialog.style.border = "1px solid #C0D7FA";
divDialog.style.borderRight = "2px outset #DEDEDE";
divDialog.style.borderLeft = "2px outset #DEDEDE";
divDialog.style.left = ((document.body.clientWidth / 2) - (dialogWidth / 2)) + "px";
divDialog.style.top = ((document.body.clientHeight / 2) - (dialogHeight / 2)) + "px";
divDialog.style.zIndex = "100";
这里，首先根据消息的字数计算了对话框的尺寸（这里的计算方法不一定最好，如果有更好的计算方法还望大家指教），后面那些DOM代码就不用我多解释了吧。
接下来，我们创建对话框的标题栏，这个用来显示对话框的标题，并且用它了实现对话框的拖动操作。
复制代码 代码如下: