javascript中alert函数的替代方案，一个自定义的对话框的方法

核心提示： 这里呢，有必要说一下的就是，javascript中alert函数的替代方案，一个自定义的对话框的方法(6)，鼠标按下和弹起事件，这里给div对象多增加了一个dragging的属性，期待大家有更加完善的方法一起讨论，下面是一个示例，用来代表对话框是否正在拖动中（这也是JS的特性之一，对object

这里呢，有必要说一下的就是，鼠标按下和弹起事件，这里给div对象多增加了一个dragging的属性，用来代表对话框是否正在拖动中（这也是JS的特性之一，对object类型的对象指定新属性的一个方法：如果之前对象没有这个属性，只需通过对象名.属性名="值" 的方式，就可以为对象增加新属性）,在鼠标移动事件中，我们通过对象的dragging属性，来决定是否移动对话框，关于对话框的移动位置，这里我偷懒了～没有判断对话框和鼠标的相对位置，而是给了一个常量，这样每次开始拖动时，对话框会稍微"瞬移"一下，有兴趣的朋友可以帮忙完善一下，呵呵。

最后，是关于对话框内容区域的创建：

　1　var　divContent　=　document.createElement("div");
　2　divContent.style.textAlign　=　"center";
　3　divContent.style.padding　=　"15px";
　4　divContent.style.fontSize　=　"12px";
　5　
　6　if　(springweb_typeIsIE)　{
　7　　　　　divContent.style.height　=　parseInt(dialogHeight　-　25)　+　"px";
　8　}　else　{
　9　　　　　divContent.style.height　=　parseInt(dialogHeight　-　55)　+　"px";
10　}
11　
12　divContent.style.backgroundColor　=　"#ffffff";
13　if　(springweb_typeIsIE6　||　springweb_typeIsIE7　||　springweb_typeIsIE8)　{
14　　　　　divContent.style.filter　=
15　　　　　"progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#FFFFFF,endColorStr=#C2E2F8)";
16　}　else　if　(springweb_typeIsFireFox)　{
17　　　　　divContent.style.backgroundImage　=
18　　　　　"-moz-linear-gradient(left,rgba(255,255,255,1),rgba(194,226,248,1))";
19　}　else　if　(springweb_typeIsWebkit)　{
20　　　　　divContent.style.backgroundImage　=
21　　　　　"-webkit-gardient(linear,0%　0%,100%　100%,from(#FFFFFF),to(#000000))";
22　}
23　
24　
25　
26　
27　divContent.innerHTML　=　msg　+　"<br　/><br　/>";
28　
29　
30　divDialog.appendChild(divContent);
31　
32　var　closeButton　=　document.createElement("img");
33　closeButton.style.cursor　=　"hand";
34　closeButton.setAttribute("src",　springweb_basePath　+　"/images/okButton.png");
35　closeButton.setAttribute("alt",　"确定");
36　
37　//the　click　event　when　the　dialog　is　closing.
38　closeButton.onclick　=　function()　{
39　
40　　　　　document.body.removeChild(divBackground);
41　　　　　document.body.removeChild(divDialog);
42　　　　　document.body.style.overflowY　=　"";
43　　　　　document.body.style.overflowX　=　"";
44　};
45　divContent.appendChild(closeButton);
46　divDialog.focus();
47　document.body.appendChild(divDialog);　　

这里应该不用多做解释了，稍微说一下，就是在13-22行的代码，这个是根据不同的浏览器来分别实现渐变效果，IE的话，用微软提供的渐变，Webkit或者Gecko内核的浏览器使用相应的CSS3标准也可以实现渐变效果。

最后嘛，这个方法支持大多数浏览器，个别浏览器如果不能完全支持，还请各位见谅，期待大家有更加完善的方法一起讨论，下面是一个示例，有兴趣的朋友可以看看。转载请注明出处～

本文示例源代码或素材下载