1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>提示框</title>
5 <style type="text/css">
6 #pop{width: 400px;border: 1px solid #666;margin: 100px auto 0px;border-radius: 8px;}
7 #pop .title{height: 40px;line-height: 40px;overflow: hidden;border-bottom: 1px solid #666;}
8 #close{float: right;}
9 #pop .cont{min-height: 100px;}
10 #pop .btns{height: 50px;text-align: center;}
11 </style>
12 <script type="text/javascript">
13 function popWin(args) {
14 args.title = args.title || "标题";
15 args.cont = args.cont || "内容";
16
17 var html = "<div class='title'>" + args.title + "<span id='close'>关闭</span></div>"
18 + "<div class='cont'>" + args.cont + "</div>"
19 + "<div class='btns'><input id='ok' type='button' value='确定' /><input id='cancel' type='button' value='取消' /></div>";
20
21 var curPop = document.getElementById("pop");
22
23 if (curPop === null) {
24 var pop = document.createElement("div");
25 pop.setAttribute("id", "pop");
26 document.body.appendChild(pop);
27 var tmp = document.getElementById("pop")
28 tmp.innerHTML = html;
29 }
30
31 show();
32
33 document.getElementById("close").onclick = function () {
34 hide();
35 }
36
37 document.getElementById("ok").onclick = function () {
38 hide();
39 args.mok();
40 }
41
42 document.getElementById("cancel").onclick = function () {
43 hide();
44 args.mcancel();
45 }
46
47 function hide() {
48 document.getElementById("pop").style.display = "none";
49 }
50
51 function show() {
52 document.getElementById("pop").style.display = "block";
53 }
54 }
55 </script>
56 <script type="text/javascript">
57 window.onload = function () {
58 document.getElementById("test").onclick = function () {
59
60 new popWin({ "cont": "这里是内容",
61 "mok": function () {
62 alert("aaaaa");
63 },
64 "mcancel": function () {
65 alert("错误");
66 }
67 });
68 console.log("ccccc");
69 }
70 }
71 </script>
72 </head>
73 <body>
74 <input id="test" type="button" value="弹出框" />
75 </body>
76 </html>
