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

　　大家好，我们平时在使用Javascript的时候，经常会需要给用户提供一些反馈信息，完成这个功能有很多种方法。但在平时开发中我们用的最多的可能就是alert这个函数了(这里只说一般情况，不排除个别高手～)，使用这个函数确实很方便，可以很简单的向用户提供一些交互信息。不过它也有很多不足，比如他的外观很简

单，而且不可控制，再有它属于浏览器级别的函数，是由各个浏览器自己实现的，所以在不同的浏览器上面，它的界面都不太一样。如果是在以前，这种情况或许很容

易被大多数用户所接受，不过随着时间的推移，用户越来越希望得到更好的体验。所以现在大家经常会在很多网站上看到JS做出来的各种对话框，这些界面会是用户体

验提升不少，所以今天就说说关于这方面的内容吧，进入正题，不说废话啦～

 

 　　首先给大家看看效果，先有一个直观的了解：

 

 

　　如上图所示，经过我的测试，这个对话框可以使用在IE6 7 8，Firefox，Chrome等多个主流浏览器中。下面就和大家一起看看他的代码吧。

 

1. 首先，我们需要判断浏览器的类型，这里用了几个bool变量来代表不同的浏览器。

 

 

 1  var  springweb_typeIsIE  =   false ;
 2  var  springweb_typeIsGecko  =   false ;
 3  var  springweb_typeIsWebkit  =   false ;
 4 
 5  var  springweb_typeIsIE6  =   false ;
 6  var  springweb_typeIsIE7  =   false ;
 7  var  springweb_typeIsIE8  =   false ;
 8  var  springweb_typeIsFireFox  =   false ;
 9  var  springweb_typeIsChrome  =   false ;
10  var  springweb_typeIsSafari  =   false ;
11 
12  var  agent  =  window.navigator.userAgent;
13 
14  if  (agent.indexOf( " MSIE 6 " )  !=   - 1 ) {
15      springweb_typeIsIE6  =   true ;
16      springweb_typeIsIE  =   true ;
17  }
18  else   if  (agent.indexOf( " MSIE 7 " )  !=   - 1 ) {
19      springweb_typeIsIE7  =   true ;
20      springweb_typeIsIE  =   true ;
21  }
22  else   if  (agent.indexOf( " MSIE 8 " )  !=   - 1 ) {
23      springweb_typeIsIE8  =   true ;
24      springweb_typeIsIE  =   true ;
25  }
26  else   if  (agent.indexOf( " Firefox " )  !=   - 1 ) {
27      springweb_typeIsFireFox  =   true ;
28      springweb_typeIsGecko  =   true ;
29  }  else   if  (agent.indexOf( " Chrome " )  !=   - 1 ) {
30      springweb_typeIsChrome  =   true ;
31      springweb_typeIsWebkit  =   true ;
32  }
33  else   if  (agent.indexOf( " Safari " )  !=   - 1 ) {
34      springweb_typeIsSafari  =   true ;
35      springweb_typeIsWebkit  =   true ;
36  }

 

 

　　如上所示，这里通过检测agent头来判断不同的浏览器，这是一个比较简单的判断方法。

　　下面开始构造我们的对话框，在构造对话框前，我们先要制造一种模态窗体的效果（就是当对话框弹出来的时候，用户不能操作页面上的其余内容），这里我们就用一个黑色的透明层来完成这样的效果。

 1  document.body.style.overflowY  =   " hidden " ;
 2  document.body.style.overflowX  =   " hidden " ;
 3  var  divBackground  =  document.createElement( " div " );
 4  divBackground.style.position  =   " absolute " ;
 5  divBackground.style.left  =   " 0px " ;
 6  divBackground.style.top  =  document.body.scrollTop  +    " px " ;
 7  divBackground.style.width  =   " 100% " ;
 8  divBackground.style.height  =   " 100% " ;
 9  if  (springweb_typeIsChrome  ||  springweb_typeIsFireFox) {
10      divBackground.style.backgroundColor  =   " rgba(0,0,0,0.7) " ;
11  }  else  {
12      divBackground.style.backgroundColor  =   " #000000 " ;    
13      divBackground.style.filter  =   " alpha(opacity=70) " ;
14  }
15  divBackground.style.zIndex  =   " 99 " ;
16  document.body.appendChild(divBackground);

 

 　　上面的代码，我们首先将浏览器的滚动条禁止，以防止用户在弹出对话框的时候滚动浏览器窗口，接下来设定相应的样式，一个比较重要的就是8-13行，这里根据浏览器的类型来应用不同的CSS样式来达到透明的效果，对于IE浏览器，我们使用IE自带的滤镜功能，而对于其他浏览器，我们使用基于CSS3的rgba方式实现透明效果。

　　接下来，我们要构造对话框，这里首先创建了一个div层，来代表我们整个对话框。方法如下：

 

 

 

 1  var  dialogWidth  =   260 ;
 2  var  dialogHeight  =   120 ;
 3  var  fontSize  =   14 ;
 4  var  lineWidth  =  document.body.clientWidth  *   0.7 ;
 5  if  ((fontSize  *  msg.length)  <  lineWidth) {
 6        dialogWidth  =  parseInt(fontSize  *  msg.length)  +   50 ;
 7  }  else  {
 8        dialogWidth  =  parseInt(lineWidth);
 9        dialogHeight  +=  parseInt(((fontSize  *  msg.length)  /  lineWidth)  *  fontSize);
10              
11  }
12          
13  divDialog.style.width  =  dialogWidth  +   " px " ;
14  divDialog.style.height  =  dialogHeight  +   " px " ;        
15  divDialog.style.position  =   " absolute " ;
16  divDialog.style.border  =   " 1px solid #C0D7FA " ;
17  divDialog.style.borderRight  =   " 2px outset #DEDEDE " ;
18  divDialog.style.borderLeft  =   " 2px outset #DEDEDE " ;
19  divDialog.style.left  =  ((document.body.clientWidth  /   2 )  -  (dialogWidth  /   2 ))  +   " px " ;
20  divDialog.style.top  =  (document.body.scrollTop + (document.body.clientHeight  /   2 )  -  (dialogHeight  /   2 ))  +   " px " ;
21  divDialog.style.zIndex  =   " 100 " ;

 

  

 　　这里，首先根据消息的字数计算了对话框的尺寸（这里的计算方法不一定最好，如果有更好的计算方法还望大家指教），后面那些DOM代码就不用我多解释了吧。 

 

　　接下来，我们创建对话框的标题栏，这个用来显示对话框的标题，并且用它了实现对话框的拖动操作。

 

 

 1  var  divHead  =  document.createElement( " div " );
 2  if  (title  !=  undefined) {
 3      divHead.innerHTML  =  title;
 4  }  else  {
 5      divHead.appendChild(document.createTextNode( " 消息 " ));
 6  }
 7  divHead.style.width  =   " 100% " ;
 8  divHead.style.height  =   " 25px " ;
 9  divHead.style.lineHeight  =   " 25px " ;
10  divHead.style.fontSize  =   " 14px " ;        
11  divHead.style.fontWeight  =   " bold " ;
12  divHead.style.borderBottom  =   " 1px outset #8989FF " ;
13  divHead.style.color  =   " white " ;
14  divHead.style.textIndent  =   " 10px " ;
15  divHead.style.backgroundColor  =   " blue " ;
16  divHead.style.backgroundImage  =   " url(' "   +  springweb_basePath   +   " /images/headbg.png') " ;
17  divHead.style.cursor  =   " move " ;
18  divHead.onmousedown  =   function () {
19 
20      divDialog.dragging  =   true ;
21      
22  };
23  divHead.onmouseup  =   function () {
24 
25      divDialog.dragging  =   false ;
26 
27  };
28 
29  document.body.onmousemove  =   function (e) {
30 
31       if  ( ! divDialog.dragging)  return ;
32      e  =  e  ||  window.event;
33       var  mouseX, mouseY;
34       var  mouseOffsetX, mouseOffsetY;
35       if  (e.pageX  ||  e.pageY) {
36          mouseX  =  e.pageX;
37          mouseY  =  e.pageY;
38 
39      }  else  {
40          mouseX  =
41              e.clientX  +  document.body.scrollLeft  -
42              document.body.clientLeft;
43          mouseY  =
44              e.clientY  +  document.body.scrollTop  -
45              document.body.clientTop;
46 
47      }
48      
49      divDialog.style.left  =  (mouseX  -  dialogWidth  *   0.4 )  +   " px " ;
50      divDialog.style.top  =  (mouseY  -   10 )  +   " px " ;            
51  };
52          
53 
54  divDialog.appendChild(divHead);

 

 

　　这里呢，有必要说一下的就是，鼠标按下和弹起事件，这里给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标准也可以实现渐变效果。

 

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

 

示例文件：示例文件下载

 

转载于:https://www.cnblogs.com/springfield/archive/2010/03/21/1690965.html