提示框

 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>