打造自己的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 篇文章

订阅专栏

本文介绍如何使用JavaScript创建自定义的提示对话框，包括面板、标题栏、关闭按钮等，并通过添加遮罩层使对话框外的元素不可用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编写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对象

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