Js 订制自己的AlertBox(信息提示框)

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

js文件中插入如下代码：

// JScript 文件 
// constants to define the title of the alert and button text. 
var ALERT_TITLE = "Oops!"; 
var ALERT_BUTTON_TEXT = "Close"; 
// over-ride the alert method only if this a newer browser. 
// Older browser will see standard alerts 
if(document.getElementById) { 
window.alert = function(txt) { 
createCustomAlert(txt); 
} 
} 
function createCustomAlert(txt) { 
// shortcut reference to the document object 
d = document; 
// if the modalContainer object already exists in the DOM, bail out. 
if(d.getElementById("modalContainer")) return; 
// create the modalContainer div as a child of the BODY element 
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div")); 
mObj.id = "modalContainer"; 
// make sure its as tall as it needs to be to overlay all the content on the page 
mObj.style.height = document.documentElement.scrollHeight + "px"; 
// create the DIV that will be the alert 
alertObj = mObj.appendChild(d.createElement("div")); 
alertObj.id = "alertBox"; 
// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert 
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px"; 
// center the alert box 
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px"; 
// create an H1 element as the title bar 
h1 = alertObj.appendChild(d.createElement("h1")); 
h1.appendChild(d.createTextNode(ALERT_TITLE)); 
// create a paragraph element to contain the txt argument 
msg = alertObj.appendChild(d.createElement("p")); 
msg.innerHTML = txt; 
// create an anchor element to use as the confirmation button. 
btn = alertObj.appendChild(d.createElement("a")); 
btn.id = "closeBtn"; 
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT)); 
btn.href = "#"; 
// set up the onclick event to remove the alert when the anchor is clicked 
btn.onclick = function() { removeCustomAlert();return false; } 
// removes the custom alert from the DOM function removeCustomAlert() { 
// document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); 
} 
// removes the custom alert from the DOM 
function removeCustomAlert() 
{ 
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer")); 
}

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

<script type="text/javascript" src="include/customAlertBox.js"></script> 
<!-- Paste this code into your external style sheet or the 
CSS section of your HTML document --> 
<style type="text/css"> 
#modalContainer { 
background-color:transparent; 
position:absolute; 
width:100%; 
height:100%; 
top:0px; 
left:0px; 
z-index:10000; 
} 
#alertBox { 
position:relative; 
width:300px; 
min-height:100px; 
margin-top:50px; 
border:2px solid #000; 
background-color:#F2F5F6; 
background-image:url(alert.png); 
background-repeat:no-repeat; 
background-position:20px 30px; 
} 
#modalContainer > #alertBox { 
position:fixed; 
} 
#alertBox h1 { 
margin:0; 
font:bold 0.9em verdana,arial; 
background-color:#78919B; 
color:#FFF; 
border-bottom:1px solid #000; 
padding:2px 0 2px 5px; 
} 
#alertBox p { 
font:0.7em verdana,arial; 
height:50px; 
padding-left:5px; 
margin-left:55px; 
} 
#alertBox #closeBtn { 
display:block; 
position:relative; 
margin:5px auto; 
padding:3px; 
border:1px solid #000; 
width:70px; 
font:0.7em verdana,arial; 
text-transform:uppercase; 
text-align:center; 
color:#FFF; 
background-color:#78919B; 
text-decoration:none; 
} 
</style>

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

<input type="button" value = "Test the alert" onclick="alert('This is a custom alert dialog that was created by overriding the window.alert method.');">