A JavaScript Alert as I want

There are alerts and confirms on JS as you all know. But its look and feel is same old style. I was curious whether we can change it. Of cause we are normally using a div tag and apply some styles to the background to gray out. Then we can use it as a function and call it whenever we need an alert. Isn’t there a better way to do that? I mean much easier way. So what I have tried to do was override the alert functionality on JS and give a customized method to do the job. So then what happens is we don’t need to change the code on each and every place where it used alert(“this is message”);.

I have found the way to this on http://slayeroffice.com/code/custom_alert/

This place can be changed so I have pasted the JS code also in here.

// constants to define the title of the alert and button text.
var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";

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

You just have to include this JS code in a shared place over the web site as for example on a master page. And then all the alerts will be modified as shown when you clicked Test the alert button. But there is another trick. The site does not mentioned about the styles used on this alert. So I have grabbed them also by using a Firefox add-on called firebug. So you may need those CSS class too or you can modify them as you want the alerts.

element.style  {
     display:block;
     left:559.5px;
}
#modalContainer > #alertBox {
     position:fixed;
}
#alertBox {
     background-color:#F2F5F6;
     background-image:url("alert.png");
     background-position:20px 30px;
     background-repeat:no-repeat;
     border:2px solid #000000;
     margin-top:50px;
     min-height:100px;
     position:relative;
     width:300px;
}
element.style  {
     height:1556px;
}
#modalContainer {
     background-color:transparent;
     background-image:url("tp.png");
     height:100%;
     left:0;
     position:absolute;
     top:0;
     width:100%;
     z-index:10000;
}
#alertBox h1 {
     background-color:#78919B;
     border-bottom:1px solid #000000;
     color:#FFFFFF;
     font:bold 0.9em verdana,arial;
     margin:0;
     padding:2px 0 2px 5px;
}
h1, h2 {
     border-bottom:1px solid #000000;
     font:bold 1.5em verdana;
     margin:0;
     padding:4px;
}
#alertBox p {
     font:0.7em verdana,arial;
     height:50px;
     margin-left:55px;
     padding-left:5px;
}
#alertBox #closeBtn {
     background-color:#78919B;
     border:2px solid #000000;
     color:#FFFFFF;
     display:block;
     font:0.7em verdana,arial;
     margin:5px auto;
     padding:3px;
     position:relative;
     text-align:center;
     text-decoration:none;
     text-transform:uppercase;
     width:70px;
}