<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#dialogoverlay{
display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #c1c1c1;
width: 100%;
z-index: 10;
}
#dialogbox{
display: none;
position: fixed;
background: red;
border-radius:7px;
width:550px;
z-index: 10;
}
#dialogbox > div{ background:#FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; }
#dialogbox > div > #dialogboxbody{ background:#333; padding:20px; color:#FFF;fon-family:verdana; }
#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; }
.btn{
background:yellow;
padding:10px;
border:2px solid green;
width:200px;
}
</style>
<script>
function CustomAlert(){
this.render = function(dialog){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = "Alert Box Header";
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()" class="btn">OK</button>';
}
this.ok = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
</script>
</head>
<body>
<div id="dialogoverlay"></div>
<div id="dialogbox">
<div>
<div id="dialogboxhead"></div>
<div id="dialogboxbody"></div>
<div id="dialogboxfoot"></div>
</div>
</div>
<h1>Custom alert box message</h1>
<button onclick="alert('This is regular and default alert message.')">Default Alert</button>
<button onclick="Alert.render('Hello frnds this is a custom alertbox message for you all, from:- php4allu')">Custom Alert</button>
</body>
</html>
Live Demo
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#dialogoverlay{
display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #c1c1c1;
width: 100%;
z-index: 10;
}
#dialogbox{
display: none;
position: fixed;
background: red;
border-radius:7px;
width:550px;
z-index: 10;
}
#dialogbox > div{ background:#FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: #666; font-size:19px; padding:10px; color:#CCC; }
#dialogbox > div > #dialogboxbody{ background:#333; padding:20px; color:#FFF;fon-family:verdana; }
#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; }
.btn{
background:yellow;
padding:10px;
border:2px solid green;
width:200px;
}
</style>
<script>
function CustomAlert(){
this.render = function(dialog){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = "Alert Box Header";
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()" class="btn">OK</button>';
}
this.ok = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
</script>
</head>
<body>
<div id="dialogoverlay"></div>
<div id="dialogbox">
<div>
<div id="dialogboxhead"></div>
<div id="dialogboxbody"></div>
<div id="dialogboxfoot"></div>
</div>
</div>
<h1>Custom alert box message</h1>
<button onclick="alert('This is regular and default alert message.')">Default Alert</button>
<button onclick="Alert.render('Hello frnds this is a custom alertbox message for you all, from:- php4allu')">Custom Alert</button>
</body>
</html>
Live Demo
