Version 2 fades in/out... :-)
Not for IE. Oh My !
Safari, FireFox & Opera, ok.
@Prisoner at War : a friendly advice :
if you aren't doing so already :
Use FireFox *2* + FireBug for debugging.
It's handy as a learning tool, as well.
<html>
<head>
<title>untitled </title>
<meta name="generator " content="TextMa te http://macromates.com/">
<meta name="author" content="Jorge Chamorro Bieling">
<!-- Date: 2008-05-02 -->
<title>Demo</title>
<style type="text/css">
html {
width: 100%;
height: 100%;
padding: 0px 0px;
background-color: #DCDCDC;
}
body {
width: 80%;
height: 100%;
margin: 0px auto;
padding: 0.5em 2em;
background-color: #FFFFFF;
border-left: thin solid black;
border-right: thin solid black;
}
p {
font: 1em Georgia, serif;
line-height: 1.4;
}
div#cover {
visibility: hidden;
position: absolute;
background-color: black;
opacity: 0.6;
z-index: 1001;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
div#popup {
visibility: hidden;
position: absolute;
z-index: 1002;
left: 0px;
top: 0px;
border: medium double black;
padding: 10px 10px;
background-color: white;
}
div#popup p {
font: normal 0.8em Verdana, Geneva, sans-serif;
text-align: center;
}
</style>
<script>
function $ (p) {
return document.getEle mentById(p);
};
function show (pID, pVisible, pTargetOpacity) {
var kFaderSteps = 15,
kFadermS = 500/kFaderSteps, //Half a second
e = $(pID),
step;
if (pVisible) {
if (e.style.visibi lity === 'visible') { return; }
e.style.opacity = 0;
e.style.visibil ity = 'visible';
step = pTargetOpacity/kFaderSteps;
(e.fader=functi on () {
if (e.fader !== arguments.calle e) { return; }
var currentOpacity = +e.style.opacit y;
if (( currentOpacity += step ) >= pTargetOpacity ) {
currentOpacity = pTargetOpacity;
e.fader = undefined;
} else { setTimeout(e.fa der, kFadermS); }
e.style.opacity = currentOpacity;
})();
} else {
//Will always fade to opacity=0.0;
if (e.style.visibi lity === 'hidden') { return; }
step = e.style.opacity/kFaderSteps;
(e.fader=functi on () {
if (e.fader !== arguments.calle e) { return; }
var currentOpacity = +e.style.opacit y;
if (( currentOpacity -= step ) <= 0.0 ) {
currentOpacity = 0.0;
e.style.visibil ity = 'hidden';
e.fader = undefined;
} else { setTimeout(e.fa der, kFadermS); }
e.style.opacity = currentOpacity;
})();
}
};
function lockScreen() {
show('cover', true, 0.6);
show('popup', true, 1.0);
return false;
};
function releaseScreen() {
show('cover', false);
show('popup', false);
};
//Center the popup when/if the window is resized.
window.onresize = window.onload = function () {
var e = $('popup'), d = document.docume ntElement;
e.style.left = ((d.clientWidth - e.offsetWidth)/2) + 'px';
e.style.top = ((d.clientHeigh t - e.offsetHeight)/2) + 'px';
};
</script>
</head>
<body>
<div id="cover"></div>
<div id="popup">
<p>Lorem Ipsum rulez!</p>
<p><button type="button" onclick="releas eScreen()">Clos e</button>
</div>
<a href="noscript. html" onclick="return lockScreen()">C lick to do it !
</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque eu est. Morbi laoreet, diam at interdum pharetra,
tellus pede posuere massa, fermentum scelerisque enim elit
in felis. Donec auctor, libero non rhoncus mattis, dui sapien
faucibus quam, ut pulvinar elit est ac tortor. Quisque molestie.
Donec eu lorem. Integer semper suscipit ipsum. Phasellus et
justo sed dolor blandit lobortis. Morbi a urna eu dolor bibendum
fermentum. Phasellus adipiscing blandit nisi. Aenean urna est,
adipiscing eu, pellentesque eget, egestas sit amet, nibh.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur id mauris non elit consectetuer
semper. Nam nec nunc. Nulla facilisi. Suspendisse nec nibh.
Cras vitae felis.</p>
</body>
</html>
