Customized Alert Box -Design own Alert using javascript?

This article deals about how to override the Alert box using Javascript. just you copy and paste the below
code in the external javascript or in aspx page itself.
Here
window.alert = function(txt) {
    createAlert("Error Message!", txt, 300,150);
}
code will override the Alert Method however it is not override method as we have in OPPs concepts.
and you can define your own Customized width and height for your alert box.


And Below code will do center you div tag for look good.

window.alert = function(txt) {
createAlert("Error Message!", txt, 300,150);
}
function
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
function
var D = document;
return Math.max(
Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
Math.max(D.body.clientWidth, D.documentElement.clientWidth)
);
}

function
var D = document.getElementById(objid);
return Math.max(D.scrollHeight, D.offsetHeight, D.clientHeight);
}
function
var D = document.getElementById(objid);
return Math.max(D.scrollWidth, D.offsetWidth, D.clientWidth);
}
// set Certer to The Pagefunction
var DW = getDocWidth();
var DH = getDocHeight();
var OW = getObjWidth(objid);
var OH = getObjHeight(objid);
var Left_object = (parseFloat(DW) - parseFloat(OW)) / 2;
var Top_object = (parseFloat(DH) - parseFloat(OH)) / 2;
document.getElementById(objid).style.left = Left_object + "px";
document.getElementById(objid).style.top = Top_object + "px";
}
//Custom Alertfunction
var _body = document.getElementsByTagName('body')[0];

var backOver = document.createElement('div'); //Back OverlaybackOver.setAttribute('id', 'back_Div');
backOver.setAttribute('className', 'black_overlay');
var alertBox = document.createElement('div'); //alertBoxalertBox.setAttribute('id', 'myAlertBox');
alertBox.setAttribute('className', 'alertBoxStyle');

alertBox.innerHTML = "<table class=\"alert_body\" style=\"width:" + wd + "px;height:"+ ht + "px;border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr class=\"alert_head\"><td style=\"width:30px;height:30px;\" align=\"center\"><img src=\"images/warn.jpg\"\></td><td style=\"width:70%;height:30px;\" align=\"left\" >" +
headStr + "</td></tr><tr><td class=\"msgbody\" colspan=\"2\" align=\"center\" >"+ msgStr + "</td></tr><tr><td class=\"btnbody\" colspan=\"2\" align=\"center\"><img src=\"images/okButton.png\" onclick=\"closeAlert()\"></td></tr></table>";
_body.appendChild(backOver);
_body.appendChild(alertBox);
setCenterToPage('myAlertBox');
}
//close Alertfunction
var _body = document.getElementsByTagName('body')[0];
_body.removeChild(document.getElementById('myAlertBox'));
_body.removeChild(document.getElementById('back_Div'));
}



closeAlert() { createAlert(headStr, msgStr, wd, ht) { setCenterToPage(objid) { getObjWidth(objid) { getObjHeight(objid) { getDocWidth() { getDocHeight() {

Tweet