How to fade the background
Question
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.
9 answers
solution1
8 2009-02-09 13:33:38
It is called a light box. You can Google for that term .
solution2
2 2009-02-09 16:35:09
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>
solution3
2 ACCPTED 2009-02-09 16:52:12
使用shadowbox !!!
solution4
1 2009-02-09 13:34:31
heres a great article about opacty in css by ppk: http://www.quirksmode.org/css/opacity.html
should help u out abit :)
solution5
1 2009-02-09 13:37:44
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;
solution6
1 2009-02-09 16:55:27
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.
solution7
0 2009-02-09 13:33:58
solution8
0 2009-02-09 13:34:22
我很确定你的意思是什么通常被称为模态对话框（这是一个有点误导性的术语）... 这里可以找到一个体面的jquery演示
solution9
0 2009-02-09 13:37:06
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.