Js订制自己的AlertBox

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

js文件中插入如下代码：

1. // JScript 文件
3.  // constants to define the title of the alert and button text.
4. var ALERT_TITLE = "Oops!";
5. var ALERT_BUTTON_TEXT = "Close";
7. // over-ride the alert method only if this a newer browser.
8. // Older browser will see standard alerts
9. if(document.getElementById) {
10.   window.alert = function(txt) {
11.     createCustomAlert(txt);
12.   }
13. }
15. function createCustomAlert(txt) {
16.   // shortcut reference to the document object
17.   d = document;
19.   // if the modalContainer object already exists in the DOM, bail out.
20.   if(d.getElementById("modalContainer")) return;
22.   // create the modalContainer div as a child of the BODY element
23.   mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
24.   mObj.id = "modalContainer";
25.    // make sure its as tall as it needs to be to overlay all the content on the page
26.   mObj.style.height = document.documentElement.scrollHeight + "px";
28.   // create the DIV that will be the alert
29.   alertObj = mObj.appendChild(d.createElement("div"));
30.   alertObj.id = "alertBox";
31.   // MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
32.   if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
33.   // center the alert box
34.   alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
36.   // create an H1 element as the title bar
37.   h1 = alertObj.appendChild(d.createElement("h1"));
38.   h1.appendChild(d.createTextNode(ALERT_TITLE));
40.   // create a paragraph element to contain the txt argument
41.   msg = alertObj.appendChild(d.createElement("p"));
42.   msg.innerHTML = txt;
44.   // create an anchor element to use as the confirmation button.
45.   btn = alertObj.appendChild(d.createElement("a"));
46.   btn.id = "closeBtn";
47.   btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
48.   btn.href = "#";
49.   // set up the onclick event to remove the alert when the anchor is clicked
50.   btn.onclick = function() { removeCustomAlert();return false; }
52. // removes the custom alert from the DOM function removeCustomAlert() {
53. //  document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
54. }
56. // removes the custom alert from the DOM
57. function removeCustomAlert() 
58. {
59.     document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
60. }

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

1.     <script type="text/javascript" src="include/customAlertBox.js"></script>
2. <!-- Paste this code into your external style sheet or the
3.      CSS section of your HTML document  -->
4.     <style type="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:2px solid #000;
21.     background-color:#F2F5F6;
22.     background-image:url(alert.png);
23.     background-repeat:no-repeat;
24.     background-position:20px 30px;
25. }
27. #modalContainer > #alertBox {
28.     position:fixed;
29. }
31. #alertBox h1 {
32.     margin:0;
33.     font:bold 0.9em verdana,arial;
34.     background-color:#78919B;
35.     color:#FFF;
36.     border-bottom:1px solid #000;
37.     padding:2px 0 2px 5px;
38. }
40. #alertBox p {
41.     font:0.7em verdana,arial;
42.     height:50px;
43.     padding-left:5px;
44.     margin-left:55px;
45. }
47. #alertBox #closeBtn {
48.     display:block;
49.     position:relative;
50.     margin:5px auto;
51.     padding:3px;
52.     border:1px solid #000;
53.     width:70px;
54.     font:0.7em verdana,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. <input type="button" value = "Test the alert" onclick="alert('This is a custom alert dialog that was created by overriding the window.alert method.');">

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