Wednesday 13 November 2013

window.alert bold text


we cannot change inbuilt window.alert functionality but below code customizes window.alert for example we can get bold text etc.

copy paste the code in your notepad and save with .html and check.

<html>
<style type="text/css">
#modalContainer {
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:10000;
}
#alertBox {
position:relative;
width:350px;
min-height:150px;
margin-top:0px;
border:1px solid LightGray;
background-repeat:no-repeat;
background-position:20px 30px;
}
#modalContainer > #alertBox {
position:fixed;
}
#alertBox p {
font:0.8em verdana,arial;
height:50px;
padding-left:5px;
}
#alertBox #closeBtn {
display:block;
position:relative;
left:125px;
top:30px;
margin:5px auto;
padding:5px 0 8 0;
border:1px solid blue;
width:70px;
font:bold 0.7em verdana,arial;
text-decoration:none;
text-align:center;
color:black;
}
</style>
<script language="javascript">
if(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt);
}
}
function createCustomAlert(txt) {
d = document;
if(d.getElementById("modalContainer")) return;
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
mObj.style.height = document.documentElement.scrollHeight + "px";
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode("OK"));
btn.href = "#";
btn.onclick = function() { removeCustomAlert();return false; }
}
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}
</script>
<body>
<input type="button" value = "Test the alert" onclick="alert('<b>This</b> is a custom alert dialog that was created by over-riding the window.alert method.');" />
</body>
</html>

No comments:

Post a Comment