如何淡化背景
[英]How to fade the background
問題描述
我本來想看看如何做到這一點，但我真的不知道該怎么稱呼它，所以我希望我能在這里描述它，有人可以指出我正確的方向。 無論如何，我正在尋找如何在網站上制作它，當你點擊某個東西時，彈出一個新的sorta層並淡化背景。 我看到網站一直這樣做，但我不知道該怎么做。 一點指導就會很棒。
9 個解決方案
解決方案1
8 2009-02-09 13:33:38
它被稱為燈箱。 你可以谷歌那個詞 。
解決方案2
2 2009-02-09 16:35:09
如果你想避免JavaScript庫的重量，這里有一個工作的例子，根據我多次使用的一些自制代碼，你可能會發現它很有啟發性......
<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>
解決方案3
2 已采納 2009-02-09 16:52:12
使用shadowbox !!!
解決方案4
1 2009-02-09 13:34:31
下面是一篇關於ppss中opacty的文章： http ：//www.quirksmode.org/css/opacity.html
應該幫助你升腹:)
解決方案5
1 2009-02-09 13:37:44
您可以使用Javascript函數解決此問題：
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’;
}
如您所見，我們首先確定將輸入面板置於頁面中心的坐標。 更新面板的寬度和高度可以更改為適合您需要的任何內容，但請記住，您需要在CSS和此函數中更改這些值。
對於黑屏本身在CSS中使用這樣的東西：
filter:alpha(opacity=80);
opacity: 0.8;
更多關於這里 。
解決方案6
1 2009-02-09 16:55:27
您可以將SimpleModal插件用於jQuery。 我在很多項目上成功使用過它。
它使用起來並不難，而且非常靈活。
解決方案8
0 2009-02-09 13:34:22
我很確定你的意思是什么通常被稱為模態對話框（這是一個有點誤導性的術語）... 這里可以找到一個體面的jquery演示
解決方案9
0 2009-02-09 13:37:06
我認為你還需要使用javascript，才能夠。
這是一種使背景淡入淡出的jQuery方法，稱為BlockUI： http ：//malsup.com/jquery/block/
如何淡化背景圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.