I was going to look up how to do this, but I don't really know what to call it to look it up, so I was hoping I could describe it here and someone could point me in the right direction. Anyways, I'm looking for how to make it so on a website, when you click on something, a new sorta layer pops up and fades the background. I see sites do this all the time but I'm not sure how to do this. A little guidance would be great.
A:
Philip Morton
2009-02-09 13:33:58
+1
A:
Hi,
heres a great article about opacty in css by ppk: http://www.quirksmode.org/css/opacity.html
should help u out abit :)
Wayne Austin
2009-02-09 13:34:31
A:
I think you need to use javascript also, to be able to to that.
Here is a jQuery way to make the background fade, called BlockUI: http://malsup.com/jquery/block/
Frost
2009-02-09 13:37:06
+1
A:
More on this here.
You can solve this with a Javascript function:
function ShowNewPanel()
{
var new_panel = document.getElementById(’new_panel’);
// w is a width of the new panel
w = 300;
// h is a height of the new panel
h = 300;
// get the x and y coordinates to center the new panel
xc = Math.round((document.body.clientWidth/2)-(w/2))
yc = Math.round((document.body.clientHeight/2)-(h/2))
// show the newsletter panel
new_panel.style.left = xc + “px”;
new_panel.style.top = yc + “px”;
new_panel.style.display = ‘block’;
}
As you can see we are first determining the coordinates that will center our input panel on the page. The width and height of the update panel can be changed to whatever suits your needs, but bear in mind that you need to change those values in CSS as well as in this function.
For the dark screen itself use something like this in the CSS:
filter:alpha(opacity=80);
opacity: 0.8;
Sakkle
2009-02-09 13:37:44
document.body.clientHeight is non-portable, it only works in IE in Quirks Mode. (You don't want Quirks Mode!) Use document.documentElement.clientWidth/Height for IE6+/Standards, and window.innerWidth/Height for all other browsers.
bobince
2009-02-09 13:57:00
Ah... this is true
Sakkle
2009-02-09 14:13:52
+2
A:
In case you want to avoid the weight of JavaScript library, here is a working example, which you might find instructive, based on some home brewed code that I've used many times...
<html>
<head>
<style type="text/css">
#helloWorld {
position:absolute;
margin:2em;padding:2em;
border:1px solid #000;
background-color:#ccd;
opacity:0;
filter:alpha(opacity=0.0); }
</style>
<script type='text/javascript'>
function setOpacity( elem, amount ) {
if ( amount > 1.0 )
amount = 1.0
/*@cc_on
@if (@_jscript)
// This is For Internet Explorer Only
//
elem.style.filter = "alpha(opacity=" + Math.round( amount * 100 ) + ")";
@else*/
// for all other browsers
//
elem.style.opacity = amount;
/*@end
@*/
}
// endOpacity ranges from 0.0 to 1.0
// fade time is in seconds
function fadeIn( elem, endOpacity, fadeTime ) {
var startTime = (new Date()).getTime();
var fadeTimer = null;
var fadeStep = function() {
var elapsedTime = (new Date()).getTime() - startTime;
var opacity = endOpacity * elapsedTime / (fadeTime * 1000.0);
if ( opacity >= endOpacity ) {
opacity = endOpacity
clearInterval( fadeTimer );
}
setOpacity( elem, opacity );
}
fadeTimer = setInterval( fadeStep, 40 ) // with luck = 25 frames per second
}
window.onload = function() {
var elem = document.getElementById( 'helloWorld' );
var clickMe = document.getElementById( 'clickMe' );
clickMe.onclick = function() {
fadeIn( elem, 0.8, 2.0 ); // fade to 80% over 2 seconds
}
}
</script>
</head>
<body>
<div id="helloWorld"><h1>Hello World</h1></div>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p>lorem ipsum blah blah dum de dum quick brown fox etc...</p>
<p><input id='clickMe' type='button' value='Click me please' /></p>
</body>
</html>
Noel Walters
2009-02-09 16:35:09
+1
A:
You can use the SimpleModal plugin for jQuery. I've used it successfully on a number of projects.
It's not too hard to use and it's very flexible.
GoodEnough
2009-02-09 16:55:27