How to create customize alert using DOM

You create a customize alert using DOM(document object model).You can change the color and text of the alert.This is an example

You need to use this css classes


< 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:2px solid #000;
width:70px;
font:0.7em verdana,arial;
text-transform:uppercase;
text-align:center;
color:#FFF;
background-color:#78919B;
text-decoration:none;
}

.important {
background-color: #F5FCC8;
padding:2px;
}

</style>



You can change that css class propety to change the alert background color,back color etc

Javascript Code




<script language=javascript type="text/javascript">

// constants to define the title of the alert and button text.
var ALERT_TITLE = "Alert";
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"));
}

</script>




Call the the javascript function and pass the message to show as alert

Example:

<input type="button" value = "Customize Alert" onclick="alert('Customize Alert');" />


Article by Abhay Kumar Raut
DNS MVM and .Net Guru Team Lead at CirrusCloud Systems Bhubaneswar,Odisha Thanks and Regards, Abhay Kumar Raut

Follow Abhay Kumar Raut or read 39 articles authored by Abhay Kumar Raut

Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: