Js订制自己的AlertBox

本文制作一个用户自定义的AlertBox,效果如图:

js文件中插入如下代码：

1. //JScript文件
3. //constantstodefinethetitleofthealertandbuttontext.
4. varALERT_TITLE="Oops!";
5. varALERT_BUTTON_TEXT="Close";
7. //over-ridethealertmethodonlyifthisanewerbrowser.
8. //Olderbrowserwillseestandardalerts
9. if(document.getElementById){
10. window.alert=function(txt){
11. createCustomAlert(txt);
12. }
13. }
15. functioncreateCustomAlert(txt){
16. //shortcutreferencetothedocumentobject
17. d=document;
19. //ifthemodalContainerobjectalreadyexistsintheDOM,bailout.
20. if(d.getElementById("modalContainer"))return;
22. //createthemodalContainerdivasachildoftheBODYelement
23. mObj=d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
24. mObj.id="modalContainer";
25. //makesureitsastallasitneedstobetooverlayallthecontentonthepage
26. mObj.style.height=document.documentElement.scrollHeight+"px";
28. //createtheDIVthatwillbethealert
29. alertObj=mObj.appendChild(d.createElement("div"));
30. alertObj.id="alertBox";
31. //MSIEdoesnttreatposition:fixedcorrectly,sothiscompensatesforpositioningthealert
32. if(d.all&&!window.opera)alertObj.style.top=document.documentElement.scrollTop+"px";
33. //centerthealertbox
34. alertObj.style.left=(d.documentElement.scrollWidth-alertObj.offsetWidth)/2+"px";
36. //createanH1elementasthetitlebar
37. h1=alertObj.appendChild(d.createElement("h1"));
38. h1.appendChild(d.createTextNode(ALERT_TITLE));
40. //createaparagraphelementtocontainthetxtargument
41. msg=alertObj.appendChild(d.createElement("p"));
42. msg.innerHTML=txt;
44. //createananchorelementtouseastheconfirmationbutton.
45. btn=alertObj.appendChild(d.createElement("a"));
46. btn.id="closeBtn";
47. btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
48. btn.href="#";
49. //setuptheonclickeventtoremovethealertwhentheanchorisclicked
50. btn.onclick=function(){removeCustomAlert();returnfalse;}
52. //removesthecustomalertfromtheDOMfunctionremoveCustomAlert(){
53. //document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
54. }
56. //removesthecustomalertfromtheDOM
57. functionremoveCustomAlert()
58. {
59. document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
60. }

将如下代码粘贴到你的HTML你的HTML的HEAD部分。

1. <scripttype="text/javascript"src="include/customAlertBox.js"></script>
2. <!--Pastethiscodeintoyourexternalstylesheetorthe
3. CSSsectionofyourHTMLdocument-->
4. <styletype="text/css">
5. #modalContainer{
6. background-color:transparent;
7. position:absolute;
8. width:100%;
9. height:100%;
10. top:0px;
11. left:0px;
12. z-index:10000;
13. }
15. #alertBox{
16. position:relative;
17. width:300px;
18. min-height:100px;
19. margin-top:50px;
20. border:2pxsolid#000;
21. background-color:#F2F5F6;
22. background-image:url(alert.png);
23. background-repeat:no-repeat;
24. background-position:20px30px;
25. }
27. #modalContainer>#alertBox{
28. position:fixed;
29. }
31. #alertBoxh1{
32. margin:0;
33. font:bold0.9emverdana,arial;
34. background-color:#78919B;
35. color:#FFF;
36. border-bottom:1pxsolid#000;
37. padding:2px02px5px;
38. }
40. #alertBoxp{
41. font:0.7emverdana,arial;
42. height:50px;
43. padding-left:5px;
44. margin-left:55px;
45. }
47. #alertBox#closeBtn{
48. display:block;
49. position:relative;
50. margin:5pxauto;
51. padding:3px;
52. border:1pxsolid#000;
53. width:70px;
54. font:0.7emverdana,arial;
55. text-transform:uppercase;
56. text-align:center;
57. color:#FFF;
58. background-color:#78919B;
59. text-decoration:none;
60. }
61. </style>

在你的HTML文档的Body部分插入如下代码:

1. <inputtype="button"value="Testthealert"onclick="alert('Thisisacustomalertdialogthatwascreatedbyoverridingthewindow.alertmethod.');">

原码地址:http://javascript.internet.com/miscellaneous/custom-alert-box.html