hello, here is a code of ajax modal dialog box. It is working fine. But I need to add some exta features in it like ajax progress bar icon when a user click on the button it plays before something happen. and i want to add fadeIn() and fadeOut() function to fade the web page when the box is opened.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#CustomAlert {
visibility: hidden;
position: absolute;
z-index: 999;
top: 200px;
left: 200px;
width: 100px;
height: 50px;
border-style: groove;
border-width: 5px;
border-color: #FFFFFF;
cursor: default;
filter: alpha(opacity=90);
background-color: silver;
text-align: center;
}
#CustomAlertSampleokButton {
background-color: silver;
font-color: #000000;
font-size: 9pt;
font-family: arial;
width: 70px;
height: 20px;
}
#CustomAlertTitle {
background-color: dimgray;
font-family: arial;
font-size: 9pt;
color: #FFFFFF;
font-weight: bold;
}
#CustomAlertMessage {
font-family: arial;
font-size: 11pt;
color: #000000;
font-weight: normal;
}
</style>
<script>
var CUSTOM_ALERT = function(){//Namespace pattern
var alertBox = null, titleEl = null, messageEl = null;
return {
hide : function(){
alertBox.style.visibility = 'hidden';
},
alert : function(aTitle, aMessage){
if(!alertBox) alertBox = document.getElementById("CustomAlert");
if(!titleEl) titleEl = document.getElementById("CustomAlertTitle");
if(!messageEl) messageEl = document.getElementById("CustomAlertMessage");
titleEl.innerHTML = aTitle;
messageEl.innerHTML = aMessage;
thisText = aMessage.length;
if (aTitle.length > aMessage.length){ thisText = aTitle.length;}
aWidth = Math.min(Math.max(thisText*5+80, 150), 350);
aHeight = (thisText>610) ? 290 : (thisText>550) ? 270 : (thisText > 490) ? 250 : (thisText > 420) ? 230 : (thisText > 360) ? 210 : (thisText > 300) ? 190 : (thisText > 240) ? 170 : (thisText > 180) ? 150 : (thisText > 120) ? 130 : (thisText > 60)? 110 : 100;
alertBox.style.width = aWidth + 'px';
alertBox.style.height = aHeight + 'px';
var left = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var top = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var hScroll = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
var vScroll = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
alertBox.style.left = hScroll + (left - aWidth)/2 + 'px';
alertBox.style.top = vScroll + (top - aHeight)/2 + 'px';
alertBox.style.visibility = 'visible';
}
};
}();
</script>
</head>
<body>
<div id="CustomAlert">
<table border="0" width="100%" height="100%">
<tr height="5"><td colspan="4" id="CustomAlertTitle"></td></tr>
<tr height="5"><td width="5"></td></tr>
<tr><td width="5"></td><td width="20" align="left"><img src="alert.gif"></td><td align="center" id="CustomAlertMessage"></td><td width="5"></td></tr>
<tr height="5"><td width="5"></td></tr>
<tr><td width="5"></td><td colspan="2" align="center"><input type="button" value="OK" onClick="CUSTOM_ALERT.hide();" id="CustomAlertSampleokButton"></td><td width="5"></td></tr>
<tr height="5"><td width="5"></td></tr>
</table>
</div>
<center>
<input type="button" value="Click Here For A Normal JavaScript Alert" onClick="alert('A Standard Boring JavaScript Alert');">
<br><br>
<input type="button" value="Click Here For A More Attractive Alert" onClick="CUSTOM_ALERT.alert('Your Alert Title','Your Alert Message Goes Here<br>This script is very easy to use and<br>can easily be customised using CSS');">
</center>
</body>
</html>