日常的网页编程中，弹出对话框经常会以各种形式出现，例如：信息提示框、确认框、新增、修改信息等对话框均是其不同的表现形式。
此文以弹出信息新增对话框进行简要演示，经请参阅！
以下为其对应的结构目录：
alert01.html 文件对应源码如下所示：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>JAVASCRIPT弹出框-01</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6
7 <link rel="stylesheet" type="text/css" href="alert01.css">
8 <script type="text/javascript" src= "alert01.js"></script>
9 </head>
10
11 <body>
12 <div id="popDiv">
13
14 <div id="popTitle"> <!-- 标题div -->
15 <span class="title_left">学生信息修改</span>
16 <span class="title_right">
17 <a href="#" onclick="hidePopup();">关闭</a>
18 </span>
19 </div>
20
21 <div id="popForm"> <!-- 表单div -->
22 <form action="insert_map.php" method="post">
23 <p id="info">
24 编号 : <input type="text" name="id" /> </br>
25 名称 : <input type="text" name="name" /> </br>
26 等级 : <input type="text" name="level" /></br>
27 年级 : <input type="text" name="lon" /> </br>
28 班级 : <input type="text" name="lat" /> </br>
29 </p>
30
31 <input type="submit" value="提交" />
32 <input type="reset" value="重置" onclick="clearinfo()"/>
33 <input type="reset" value="取消" onclick="hidePopup()" />
34 </form>
35 </div>
36 </div>
37
38 <p>
39 <input name="" type="button" onclick="showPopup()" value="学生信息修改" />
40 </p>
41
42 <script type="text/javascript">
43 /*-------------------------鼠标左键拖动---------------------*/
44 /*--------当不需要实现此功能时，可以将这一部分代码删除------------*/
45 var objDiv = document.getElementById("popDiv");
46
47 // 判断浏览器类型
48 var isIE = document.all ? true : false;
49
50 // 当鼠标左键按下后执行此函数
51 document.onmousedown = function(evnt) {
52 var evnt = evnt ? evnt : event;
53
54 if (evnt.button == (document.all ? 1 : 0)) {
55 // mouseD为鼠标左键状态标志，为true时表示左键被按下
56 mouseD = true;
57 }
58 }
59
60 objDiv.onmousedown = function(evnt) {
61 objDrag = this; // objDrag为拖动的对象
62 var evnt = evnt ? evnt : event;
63
64 if (evnt.button == (document.all ? 1 : 0)) {
65 mx = evnt.clientX;
66 my = evnt.clientY;
67 objDiv.style.left = objDiv.offsetLeft + "px";
68 objDiv.style.top = objDiv.offsetTop + "px";
69
70 if (isIE) {
71 objDiv.setCapture();
72 //objDiv.filters.alpha.opacity = 50; // 当鼠标按下后透明度改变
73 } else {
74 window.captureEvents(Event.MOUSEMOVE); // 捕获鼠标拖动事件
75 //objDiv.style.opacity = 0.5; // 当鼠标按下后透明度改变
76 }
77 }
78 }
79
80 document.onmouseup = function() {
81 mouseD = false;//左键松开
82 objDrag = "";
83
84 if (isIE) {
85 objDiv.releaseCapture();
86 //objDiv.filters.alpha.opacity = 100; //当鼠标左键松开后透明度改变
87 } else {
88 window.releaseEvents(objDiv.MOUSEMOVE); //释放鼠标拖动事件
89 //objDiv.style.opacity = 1; //当鼠标左键松开后透明度改变
90 }
91 }
92
93 document.onmousemove = function(evnt) {
94 var evnt = evnt ? evnt : event;
95
96 if (mouseD == true && objDrag) {
97 var mrx = evnt.clientX - mx;
98 var mry = evnt.clientY - my;
99 objDiv.style.left = parseInt(objDiv.style.left) + mrx + "px";
100 objDiv.style.top = parseInt(objDiv.style.top) + mry + "px";
101 mx = evnt.clientX;
102 my = evnt.clientY;
103 }
104 }
105 </script>
106 </body>
107 </html>
alert01.css 文件对应源码如下所示：
alert01.js 文件对应源码如下所示：
insert_map.php 文件对应源码如下所示：
访问链接对应的网址（实际网址依据本地服务配置会有相应的变化）为：http://localhost//webapps/alert-01/alert01.html
页面显示如下图所示：
至此， HTML-002-弹出对话框 顺利完结，希望此文能够给初学 HTML 的您一份参考。
最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^
时间： 2024-10-27 07:33:00