I'd personally just use jQuery, it's simple, clean and reliable, but I whipped this up in plain vanilla javascript for you just for fun:
It is bare bones to be sure, just 2 divs, 2 functions and some css, but it should get the job done and the demo.html is only 7kb even including the junk filler content. It is about as lightweight as it can get I think.
Tested to work in IE7+ & FF, should be fine in Chrome but haven't tested it.
fade in/out speed is controllable in the function parameters, the rest can be tweeked in the css. it should work with iframes as it dumps the content passed in into a div as html.
stick these classes in a stylesheet:
.shadeAlert{
display:none;
opacity:0.0;
filter:alpha(opacity=0);
z-index:9999;
width:100%;
height:100%;
position:absolute;
left:0px;
top:0px;
padding:0;
margin:0;
}
.shadeAlert-drop{
display:none;
z-index:9999;
background-color:#000;
opacity:0.0;
filter:alpha(opacity=0);
width:100%;
height:100%;
position:absolute;
left:0px;
top:0px;
padding:0;
margin:0;
}
.shadeAlert-box{
margin:15% auto;
max-width:50%;
max-height:50%;
border:4px solid #888;
background-color:#CCC;
text-align:center;
display:block;
padding:10px;
}
.shadeAlert-title{
font-weight:800;
font-size:36px;
color:#800;
}
.shadeAlert-body{
color:#000;
}
.shadeAlert-btn{
width:100px;
margin:10px;
}
this in a .js script:
/*
speed parameter is the total time in ms that the fade transition takes to complete
*/
function shadeAlert(msgTitle, msgBody, speed){
var alertBox = document.getElementById("shadeAlert");
var alertBoxBG = document.getElementById("shadeAlert-drop");
//build the alert
var t = '';
t += '<div id="shadeAlert-box" class="shadeAlert-box">';
t += '<span id="shadeAlert-title" class="shadeAlert-title">' + msgTitle + '</span><br/>';
t += '<span id="shadeAlert-body" class="shadeAlert-body">' + msgBody + '</span><br/>';
t += '<input type="submit" id="shadeAlert-btn" class="shadeAlert-btn" value="OK" />';
t += '</div>';
alertBox.innerHTML = t;
//fade in
alertBox.style.display = "block";
alertBoxBG.style.display = "block";
var alertFader = setInterval(function(){fadeAlert(speed, alertFader, "in")}, 1);
//close button handler
document.getElementById("shadeAlert-btn").onclick = function(){
var alertFader = setInterval(function(){fadeAlert(speed, alertFader, "out")}, 1);
}
}
function fadeAlert(speed, alertFader, mode){
var alertBox = document.getElementById("shadeAlert");
var alertBoxBG = document.getElementById("shadeAlert-drop");
var boxRate = 1.0/speed;
var bgRate = 0.8/speed;
//init
if(isNaN(parseFloat(alertBox.style.opacity))){
alertBox.style.opacity = 0.0;
alertBoxBG.style.opacity = 0.0;
}
if(mode == "in"){
//normal browsers:
alertBox.style.opacity = parseFloat(alertBox.style.opacity) + boxRate;
alertBoxBG.style.opacity = parseFloat(alertBoxBG.style.opacity) + bgRate;
//because IE is stupid and likes to be difficult:
alertBox.style.filter = "alpha(opacity="+ Math.ceil((parseFloat(alertBox.style.opacity) * 100) + (boxRate * 100)) +")";
alertBoxBG.style.filter = "alpha(opacity="+ Math.ceil((parseFloat(alertBoxBG.style.opacity) * 100) + (bgRate * 100)) +")";
//check for goal
if(parseFloat(alertBox.style.opacity) >= 1.0){
window.clearInterval(alertFader);
}
}
else{
alertBox.style.opacity = parseFloat(alertBox.style.opacity) - boxRate;
alertBoxBG.style.opacity = parseFloat(alertBoxBG.style.opacity) - bgRate;
alertBox.style.filter = "alpha(opacity="+ Math.ceil((parseFloat(alertBox.style.opacity) * 100) - (boxRate * 100)) +")";
alertBoxBG.style.filter = "alpha(opacity="+ Math.ceil((parseFloat(alertBoxBG.style.opacity) * 100) - (bgRate * 100)) +")";
if(parseFloat(alertBox.style.opacity) <= 0.0){
window.clearInterval(alertFader);
document.getElementById("shadeAlert").style.display = "none";
document.getElementById("shadeAlert-drop").style.display = "none";
}
}
}
and these two divs in your html:
<div id="shadeAlert-drop" class="shadeAlert-drop"></div>
<div id="shadeAlert" class="shadeAlert"></div>
here's a quick demo in a single demo.html file (7kb):
<!doctype html>
<html>
<head>
<style type="text/css">
.shadeAlert{
display:none;
opacity:0.0;
filter:alpha(opacity=0);
z-index:9999;
width:100%;
height:100%;
position:absolute;
left:0px;
top:0px;
padding:0;
margin:0;
}
.shadeAlert-drop{
display:none;
z-index:9999;
background-color:#000;
opacity:0.0;
filter:alpha(opacity=0);
width:100%;
height:100%;
position:absolute;
left:0px;
top:0px;
padding:0;
margin:0;
}
.shadeAlert-box{
margin:15% auto;
max-width:50%;
max-height:50%;
border:4px solid #888;
background-color:#CCC;
text-align:center;
display:block;
padding:10px;
}
.shadeAlert-title{
font-weight:800;
font-size:36px;
color:#800;
}
.shadeAlert-body{
color:#000;
}
.shadeAlert-btn{
width:100px;
margin:10px;
}
</style>
<script type="text/javascript">
function shadeAlert(msgTitle, msgBody, speed){
var alertBox = document.getElementById("shadeAlert");
var alertBoxBG = document.getElementById("shadeAlert-drop");
//build the alert
var t = '';
t += '<div id="shadeAlert-box" class="shadeAlert-box">';
t += '<span id="shadeAlert-title" class="shadeAlert-title">' + msgTitle + '</span><br/>';
t += '<span id="shadeAlert-body" class="shadeAlert-body">' + msgBody + '</span><br/>';
t += '<input type="submit" id="shadeAlert-btn" class="shadeAlert-btn" value="OK" />';
t += '</div>';
alertBox.innerHTML = t;
//fade in
alertBox.style.display = "block";
alertBoxBG.style.display = "block";
var alertFader = setInterval(function(){fadeAlert(speed, alertFader, "in")}, 1);
//close button handler
document.getElementById("shadeAlert-btn").onclick = function(){
var alertFader = setInterval(function(){fadeAlert(speed, alertFader, "out")}, 1);
}
}
function fadeAlert(speed, alertFader, mode){
var alertBox = document.getElementById("shadeAlert");
var alertBoxBG = document.getElementById("shadeAlert-drop");
var boxRate = 1.0/speed;
var bgRate = 0.8/speed;
//init
if(isNaN(parseFloat(alertBox.style.opacity))){
alertBox.style.opacity = 0.0;
alertBoxBG.style.opacity = 0.0;
}
if(mode == "in"){
//normal browsers:
alertBox.style.opacity = parseFloat(alertBox.style.opacity) + boxRate;
alertBoxBG.style.opacity = parseFloat(alertBoxBG.style.opacity) + bgRate;
//because IE is stupid and likes to be difficult:
alertBox.style.filter = "alpha(opacity="+ Math.ceil((parseFloat(alertBox.style.opacity) * 100) + (boxRate * 100)) +")";
alertBoxBG.style.filter = "alpha(opacity="+ Math.ceil((parseFloat(alertBoxBG.style.opacity) * 100) + (bgRate * 100)) +")";
//check for goal
if(parseFloat(alertBox.style.opacity) >= 1.0){
window.clearInterval(alertFader);
}
}
else{
//normal browsers:
alertBox.style.opacity = parseFloat(alertBox.style.opacity) - boxRate;
alertBoxBG.style.opacity = parseFloat(alertBoxBG.style.opacity) - bgRate;
//because IE is stupid and likes to be difficult:
alertBox.style.filter = "alpha(opacity="+ Math.ceil((parseFloat(alertBox.style.opacity) * 100) - (boxRate * 100)) +")";
alertBoxBG.style.filter = "alpha(opacity="+ Math.ceil((parseFloat(alertBoxBG.style.opacity) * 100) - (bgRate * 100)) +")";
//check for goal
if(parseFloat(alertBox.style.opacity) <= 0.0){
window.clearInterval(alertFader);
document.getElementById("shadeAlert").style.display = "none";
document.getElementById("shadeAlert-drop").style.display = "none";
}
}
}
</script>
</head>
<body>
<div id="shadeAlert-drop" class="shadeAlert-drop"></div>
<div id="shadeAlert" class="shadeAlert"></div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec sem nisl. Pellentesque sit amet sagittis velit, id interdum nisi. Ut at ligula turpis. Mauris vel porttitor nisl. Duis congue mattis lorem, at ultrices urna condimentum et. Integer est augue, consequat sed velit at, eleifend ultrices nunc. Mauris et mi faucibus, varius ipsum non, congue turpis. Suspendisse blandit scelerisque lobortis. Phasellus vehicula purus pellentesque nisi tempus lobortis.
<p>Duis facilisis turpis mi, eu bibendum neque ullamcorper sit amet. Maecenas ullamcorper turpis vel luctus commodo. Ut consequat elementum nisi, ut porta risus dignissim vel. Nam vitae turpis non neque congue consectetur a eu odio. Aenean vehicula dui ut nisi dapibus, vitae varius metus dapibus. Sed ullamcorper, nisi id porttitor varius, neque mi vulputate mauris, vel gravida odio sapien eu libero. Pellentesque convallis pulvinar tempus. Etiam in lobortis sem. Mauris commodo consequat turpis, sit amet pretium augue vehicula sit amet. Aliquam ac vestibulum sem, eget volutpat dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam suscipit odio nulla. Aliquam erat volutpat. Nunc in sem urna. Aliquam rhoncus id mauris at pretium. Ut vehicula mauris ultrices turpis euismod luctus.
<p>In ornare, mi non auctor pretium, quam tellus varius dui, vel malesuada tellus leo eget tortor. Aliquam suscipit molestie blandit. Aenean non libero pharetra, commodo quam sit amet, sollicitudin dolor. Sed ac ornare nulla. Fusce augue urna, viverra vel mauris suscipit, vulputate placerat dui. Morbi eu dolor pellentesque, varius est et, condimentum elit. Sed tempor libero sed semper ultrices. Quisque eget diam a dolor bibendum lacinia eu nec mauris. Cras quis velit at risus placerat pulvinar. Etiam pharetra nulla lorem, eget mollis arcu sollicitudin non. Nulla quis laoreet augue, eu facilisis nisl. Etiam consequat, nibh quis malesuada scelerisque, libero purus placerat enim, ac tincidunt augue eros ut magna. Nullam volutpat faucibus eros, eget tempus mauris dictum iaculis.
<p>Vestibulum felis tortor, malesuada ac condimentum eget, vehicula nec nisi. Integer fringilla sed arcu quis mollis. Aenean ut nulla orci. In tempor interdum mattis. Ut sed nulla elit. Maecenas nunc sapien, laoreet ut ornare quis, malesuada vitae elit. Sed nunc felis, ornare ac enim at, ullamcorper suscipit diam.
<p>Quisque arcu enim, tempor ac ornare ac, posuere eu justo. Fusce quis lorem fringilla, accumsan velit quis, aliquam massa. Aliquam id nulla vestibulum arcu sagittis accumsan ac in magna. Phasellus erat velit, malesuada nec eleifend eget, cursus vel tellus. Pellentesque rutrum gravida volutpat. Suspendisse et nunc faucibus, ultrices leo sit amet, adipiscing dolor. Morbi ac mollis metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed suscipit nunc vel ligula aliquet, in eleifend ante feugiat. Suspendisse sagittis vel velit a ultrices. Fusce turpis nunc, lacinia eu risus in, aliquam pulvinar turpis.
<br/><br/>
<input id="submit" type="submit" value="Popup" style="margin:0 auto;"/>
</div>
</body>
<!--popup usage example-->
<script type="text/javascript">
var popupTitle = "Title Goes Here";
var popupText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec sem nisl. Pellentesque sit amet sagittis velit, id interdum nisi. Ut at ligula turpis. Mauris vel porttitor nisl. Duis congue mattis lorem, at ultrices urna condimentum et. Integer est augue, consequat sed velit at, eleifend ultrices nunc. Mauris et mi faucibus, varius ipsum non, congue turpis. Suspendisse blandit scelerisque lobortis. Phasellus vehicula purus pellentesque nisi tempus lobortis.";
var popupSpeed = 50;
document.getElementById("submit").onclick = function(){
shadeAlert(popupTitle, popupText, popupSpeed)
}
</script>
</html>
I'm gonna be king of the moon dots!
