如何淡化背景

我正在查看如何做到這一點，但我真的不知道該怎麼稱呼它來查看它，所以我希望我可以在這裏描述它，並且有人可以指出我正確的方向。無論如何，我正在尋找如何在網站上做到這一點，當你點擊某個東西時，會彈出一個新的sorta層並淡化背景。我看到網站一直在做這個，但我不知道如何做到這一點。一點指導會很棒。如何淡化背景

來源

2009-02-09 The.Anti.9

「我看到網站一直這樣做」提供鏈接將有所幫助。 – 2009-02-09 20:42:35

使用shadowbox !!!

來源

2009-02-09 16:52:12 GerManson

它被稱爲燈箱。您可以Google for that term。

來源

2009-02-09 13:33:38

您可以使用jQuery來做到這一點。 CSS技巧有一個叫做的教程，帶有jQuery的顏色淡化菜單here。

來源

2009-02-09 13:33:58

我相當肯定你的意思是通常稱爲模態對話框（這是一個有些誤導術語）...一個體面的jQuery的演示可以發現here

來源

2009-02-09 13:34:22 Steerpike

繼承人一個偉大的關於CSS opacty的文章PPK：http://www.quirksmode.org/css/opacity.html

應該幫助ü出升技:)

來源

2009-02-09 13:34:31

我認爲你需要使用JavaScript也，才能夠到。

這裏是一個jQuery的方式，使背景褪色，稱爲BlockUI： http://malsup.com/jquery/block/

來源

2009-02-09 13:37:06 Frost

您可以用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;

更多關於此here。

來源

2009-02-09 13:37:44 Sakkle

document.body.clientHeight是不可移植的，它只適用於怪癖模式下的IE。（您不需要怪異模式！）對於IE6 + /標準使用document.documentElement.clientWidth/Height，對於所有其他瀏覽器使用window.innerWidth/Height。 – bobince 2009-02-09 13:57:00

在你想避免的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>

來源

2009-02-09 16:35:09

您可以使用SimpleModal plugin用於jQuery。我在很多項目上都成功地使用了它。

這不是太難使用，它非常靈活。

來源

2009-02-09 16:55:27 mbillard

如何淡化背景

回答

相關問題