他們如何在javascript/jquery中做這種半透明疊加效果？

如果您導航到http://learn.knockoutjs.com/，您會看到一個'歡迎'款式的屏幕，這是一個半透明的疊加層，向用戶介紹屏幕元素。這很漂亮。他們如何在javascript/jquery中做這種半透明疊加效果？

它看起來有點像jquery插件BlockUI，但我認爲它比這更有趣。 Fancybox接近，但似乎只提供一箇中心元素。查看源文件並沒有多大幫助，我不是任何JS專家。

有誰知道這是如何做的或如何在頁面上做類似的事情？

2011-09-08 Glinkot

Steve使用：http://trentrichardson.com/Impromptu/作爲教程頁面上的消息框。

你可能會喜歡這個帖子描述說，他在創造learn.knockoutjs.com使用的開源工具：http://blog.stevensanderson.com/2011/07/22/review-open-source-components-used-in-learnknockoutjs/

來源

2011-09-08 00:26:13

謝謝你。正確地回答我的問題（儘管在博客中他注意到他不喜歡那個插件，並且對它感到遺憾！）但是很高興知道。謝謝。 – Glinkot

快速瀏覽一下下面的例子：

http://jsfiddle.net/2q7xT/

說明：

這可能不是最好的實現，但這個想法是存在的。首先，你將需要一個<div>，你將與任何一個半透明的黑色圖像填充：

background: url(semi-transparent-image.png) repeat;

我使用的RGBA技術，但它不是由所有的瀏覽器都支持。

第二種解決方案是用黑色顏色，例如以填充的div：

background-color: #000;

，然後使用跨瀏覽器opacity CSS屬性，以減少不透明度：

/* IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 

/* IE 5-7 */ 
filter: alpha(opacity=50); 

/* Netscape */ 
-moz-opacity: 0.5; 

/* Safari 1.x */ 
-khtml-opacity: 0.5; 

/* Good browsers */ 
opacity: 0.5;

最重要的部分是這個div應該有position: fixed;和z-index低於它上面元素的z-index。

來源

2011-09-08 00:19:04 Bassem

感謝您的鏈接！ – Glinkot

是的，它看起來像一個jQuery UI對話框插件。我實際上一直在研究創建類似的東西，這是我的理解，那些UI對話框是非常可定製的。以下是我在YouTube上找到的基本教程http://www.youtube.com/watch?v=b16V25eNyJY。希望這可以幫助。

來源

2011-09-08 00:22:14 Scott

我會檢查一下斯科特，謝謝。 – Glinkot

這就是所謂的燈箱，或者，一個模態框。有幾個很酷的jQuery燈箱插件。這裏有幾個：

我建議的fancybox或彩盒爲你想要做什麼。 FancyBox是我的最愛。

下面是排名前10位的jQuery插件modalbox：Top 10 jQuery Modal Box Plugins

注：只使用CSS的對話框（另一個答案已經建議做這種方式）並不好，因爲你將不能夠做一個很酷的衰落過渡，你不能用按鈕或鏈接關閉它。

我希望這是有幫助的。

來源

2011-09-08 00:25:00 Nathan

好點。我遇到過其中一些，但是「整個頁面覆蓋多個部分」在這些例子中並不明顯。將需要一些finagling：0）感謝您的幫助。 – Glinkot

@Glinkot沒問題:) – Nathan

Glinkot。如果你看一下網頁的源代碼，它給你這樣一個div：

<div id="seeThru" style="opacity: .75; height: 100%; width: 100%"></div>

從那裏你可以只覆蓋錨或任何其他

來源

2013-08-21 17:55:16 JFakult

如果您將該div獨自複製到HTML文檔中（並且添加缺少的雙引號），則不會發生任何情況。 – Seanny123

他們如何在javascript/jquery中做這種半透明疊加效果？

回答

相關問題