Sunday, April 15, 2007

Custom Alert Box Using JavaScript

Coding

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML >
<HEAD >
<title >Custom Alert Box</title >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<script >
document.onclick=disableEvents
document.oncontextmenu=disableEvents
var ef=0
function custAlert()
{
ef=1
var ids
ids=document.getElementById('alert')
ids.style.left=300;
ids.style.top=150;
ids.style.visibility="visible"
}

function disableEvents()
{
if(ef)
return false;
}
</script >
</HEAD >
<body bgColor="#ffffff" onLoad="custAlert();"style="overdflow:hidden" >
<form id="Form1" method="post" runat="server" >
<div align="center" id="alert" style="border:2px solid gray; background:#cdeb8b
url('images/img3.gif') repeat-x; LEFT:240; VISIBILITY:hidden; WIDTH:349; COLOR:red;
POSITION:absolute; TOP:104; HEIGHT:108" >
<br >
<h3 style="LEFT:0;WIDTH:152;POSITION:absolute;TOP:0;HEIGHT:40;align:Left" >
<font color="#356AA0" >Custom Alert Box</font ></h3 >
<IMG style="LEFT: 336px; WIDTH: 6px; POSITION: absolute; TOP: 8px; HEIGHT: 6px"
height="6" alt="Close" src="images/Cross.png" onClick="ef=0;document.getElementById('alert').style.visibility='hidden';" >
<br >
<HR width="99.03%" SIZE="1" style="LEFT: 0px; WIDTH: 99.03%; POSITION: absolute;
TOP: 32px; HEIGHT: 1px" >
<div id="msg" style="FONT-WEIGHT: bold; FONT-SIZE: smaller; TEXT-TRANSFORM: capitalize; WIDTH: 349; COLOR: #356aa0; FONT-FAMILY: 'Times New Roman', Verdana, Arial, sans-serif; HEIGHT: 85; TEXT-DECORATION: none" >
NJoy Programming<p >Success be Yours</div >
<p > </div >
</form >
</body >
</HTML >

Program Demo(Tested In IE 7 & Firefox 2.0.0.12)

Background Image



Close Image



Place The Close and Background image withing the Images folder of the root dir

Output

No comments: