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

最新推荐文章于 2020-11-13 12:29:08 发布

lisky119

最新推荐文章于 2020-11-13 12:29:08 发布

阅读量1.3k

点赞数

分类专栏： JS技巧文章标签： javascript div function api button input

JS技巧专栏收录该内容

24 篇文章

订阅专栏

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

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

实现难点：
         1、利用何种方式模仿这个提示对话框？
         2、如何在弹出对话框时，使网页中其他元素不可用
思路：
        问题1：如何模仿？有API可调么？如何调呢？我比较生疏，不予采用调API；这里我选择div来制作这个效果
               div比较熟。大家有其他的好方法，请赐教。
         问题2：如何在弹出提示对话框的时候，使其他元素不可用呢？这个问题一时比较难解决。后来被人一语点醒，利用css来解决。

        OK，开工吧，其实非常简单。
      第一步，先建立一个htm文件，在里面利用js创建我们的提示对话框面板。
        htm代码省略，只贴js代码

function Msg()
2

{
3

//创建弹出对话框面板
4

var dvMsg = document.createElement("div");
5

//设未绝对定位很重要
6

dvMsg.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步的方法做。
完毕后的代码如下。

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

// 提示图片
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

// 关闭图片
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

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代码中添加下列代码

/*
2

*/
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对象

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