打造自己的Javascript alert confirm对象（一）

 编写Js代码时你是否厌烦了window.alert,window.confirm所弹出来单一的对话框？
接下来的日子里，我们一起来学习利用JS来开发属于自己的js对象。嘿嘿！

老鸟请移步别处，小弟不喜欢被批：）
一、 打造自己的alert（）对象

实现难点：
         1、利用何种方式模仿这个提示对话框？
         2、如何在弹出对话框时，使网页中其他元素不可用
思路：
        问题1：如何模仿？有API可调么？如何调呢？我比较生疏，不予采用调API；这里我选择div来制作这个效果
               div比较熟。大家有其他的好方法，请赐教。
         问题2：如何在弹出提示对话框的时候，使其他元素不可用呢？这个问题一时比较难解决。后来被人一语点醒，利用css来解决。
         
        OK，开工吧，其实非常简单。
      第一步，先建立一个htm文件，在里面利用js创建我们的提示对话框面板。
        htm代码省略，只贴js代码

 1 function  Msg()
 2 {
 3//创建弹出对话框面板
 4var dvMsg = document.createElement("div");
 5//设未绝对定位很重要            
 6dvMsg.style.position = "absolute";
 7            dvMsg.setAttribute('id','msg');
 8            dvMsg.style.width = "400px";
 9            dvMsg.style.height = "100px";
10            dvMsg.style.top="40%";
11            dvMsg.style.left="30%";
12            dvMsg.style.background = "white";
13            dvMsg.style.border="1px solid #6699dd";
14            dvMsg.style.zIndex = "1112";
15 //添加至body中
16            document.body.appendChild(dvMsg);
17}

 OK，面板创建完毕，如果你调用该函数的话，就会发现，在页面中就会多出一个蓝色边框的块
第2步：为他添加标题栏，关闭按钮和确定按钮，以及提示图片，也是按第1步的方法做。
完毕后的代码如下。

 1 function  Msg(str)
 2 // 创建提示对话框面板
 3              var  dvMsg  =  document.createElement( " div " );
 4             dvMsg.style.position  =   " absolute " ;
 5             dvMsg.setAttribute('id','msg');
 6             dvMsg.style.width  =   " 400px " ;
 7             dvMsg.style.height  =   " 100px " ;
 8             dvMsg.style.top = " 40% " ;
 9             dvMsg.style.left = " 30% " ;
10             dvMsg.style.background  =   " white " ;
11             dvMsg.style.border = " 1px solid #6699dd " ;
12             dvMsg.style.zIndex  =   " 1112 " ;
13             document.body.appendChild(dvMsg);
14              // 标题栏
15              var  title  =  document.createElement( " div " );
16             title.style.position  =   " absolute " ;
17             title.setAttribute('id','title');
18             title.style.width  =   " 400px " ;
19             title.style.height  =   " 10px " ;
20             title.style.top =   " 0 " ;            
21             title.style.filter  =   " progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=100,finishOpacity=100%) " ;
22             title.style.zIndex  =   " 1113 " ;
23             title.innerHTML  =   " <font size='2'>提示</font> " ;
24             title.style.background  =   " #6699ff " ;
25             
26              // 提示图片
27              var  imgErr  =  document.createElement( " img " );
28             imgErr.src  =   " pic/err.gif " ;
29             imgErr.style.marginLeft  =   " 15px " ;
30             imgErr.style.marginTop  =   " 30px " ;
31             imgErr.style.position  =   " absolute " ;
32             
33              // 关闭图片
34              var  imgClo  =  document.createElement( " img " );
35             imgClo.src  =   " pic/delete.gif " ;
36             imgClo.style.marginLeft  =   " 378px " ;
37             imgClo.style.marginTop  =   " 0px " ;
38             imgClo.style.position  =   " absolute " ;
39             imgClo.style.zIndex  =   " 1115 " ;
40             imgClo.style.cursor  =   " hand " ;
41             imgClo.onclick  =   function  ()
42                               {
43                                document.body.removeChild(dv);
44                                document.body.removeChild(dvMsg);    
45                             }
46              // 确定按钮
47              var  btn  =  document.createElement( " input " );
48             btn.id  =   " ok " ;
49             btn.type =   " button " ;
50             btn.value  =   " 确  定 " ;
51             btn.style.marginTop  =   " 75px " ;
52             btn.style.marginLeft  =   " 43% " ;
53             btn.style.position  =   " absolute " ;
54             btn.style.border  =   " 1px solid #6699ff " ;
55             btn.style.background  =   " lightblue " ;
56              // 点击关闭
57             btn.onclick  =   function  ()
58                            {
59                            document.body.removeChild(dv);
60                            document.body.removeChild(dvMsg);
61                          }         
62              // 响应回车              
63             btn.onkeydown  =   function  ()
64                            {
65                            if (event.keyCode == "13")
66                            {
67                                document.body.removeChild(dv);
68                                document.body.removeChild(dvMsg);
69                            }
70                          }
71              var  msg  =  document.createElement( " div " );
72             msg.style.marginTop  =   " 30px " ;
73             msg.style.marginLeft  =   " 18% " ;
74             msg.style.position  =   " absolute " ;
75             msg.style.width  =   " 300px " ;
76             msg.innerHTML  =  str;
77             
78             msg.style.wordWrap  =   " break-word " ;
79             document.getElementById('msg').appendChild(msg);
80             document.getElementById('msg').appendChild(btn);
81             document.getElementById('msg').appendChild(imgErr);
82             document.getElementById('msg').appendChild(imgClo);
83             document.getElementById('msg').appendChild(title);         
84             document.getElementById('ok').focus();
85 }

OK 现在调用这个函数，是不是我们自己的提示对话框就出来了？？

可是细心的您肯定又会发现，不对啊，window.alert弹出后，它后面的元素都不可用啊，那我们就进一步完善它吧
其实很简单，添加一个层，遮住它后面的元素就行咯。
在JS代码中添加下列代码

 1 /**/ /*
 2            Copyright by:LRH http://hunanboy.cnblogs.com            
 3        */  
 4              // 确定遮罩层的高度，宽度
 5              var  h  =  screen.availHeight;
 6              var  w  =  screen.availHeight;
 7              // 创建遮罩层，它的主要作用就是使网页中的其他元素不可用。
 8              var  dv  =  document.createElement( " div " );
 9             dv.setAttribute('id','bg');
10              // 设置样式
11             dv.style.height  =  h  +   " px " ;
12             dv.style.width  =  w  +   " px " ;
13             dv.style.zIndex  =   " 1111 " ;
14             dv.style.filter  =   " progid:DXImageTransform.Microsoft.Alpha(style=2,opacity=1,finishOpacity=100%) " ;
15             dv.style.background  =   " red " ;
16             dv.style.top  =   0 ;
17              // 设为绝对定位很重要
18             dv.style.position  =   " absolute " ;
19              // 将该元素添加至body中
20             document.body.appendChild(dv);

好啦，运行界面就是下面这个样子的。下一节制作confirm对象


               
申明：
         本文章代码未经过任何测试，本系列随笔为原创，转载请注明。