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

　　// 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"));

　　}

　　<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>

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