<script type="text/javascript"> /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Steve Chipman | http://slayeroffice.com/ */ // 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")); } </script> <style> #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.');">
