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>
