打造自己的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代码

 1function Msg()
 2}

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

 1function 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}

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

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

 1            document.body.appendChild(dv);

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


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