打造自己的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{
 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步的方法做。
完毕后的代码如下。
 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                             {
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对象


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

posted on 2007-04-03 16:13  刘荣华  阅读(10754)  评论(30编辑  收藏  举报

导航