最近偏離學術的道路越來越遠了！！
今天要小結的是實現一個半透明遮罩效果。點擊頁面上的一個按鈕，立即在屏幕的正中央顯示某個部件，並且在這個部件之外的區域像是蒙上了一層半透明的遮罩。點擊遮罩區域，該正中央的部件消失，頁面恢復成原來樣子。
首先談談最簡單的實現方式吧。准備兩個div，一個是幕布<div class="bg"></div>，另一個是要顯示在屏幕正中央的部件<div class="content"></div>，content 里面要顯示什么東東，就由你自己去定義了。可以是圖片，也可以是圖表、視頻什么的。然后就是添加效果，使得它有我們的效果。
1.既然點擊了按鈕，要遮住原網頁，於是給這兩個div設置顯示優先級：z-index， 把content的設成3，bg的設成2
2 既然要半透明，那就給bg這個遮罩上一個顏色吧：background:#000
3 一開始他們是隱藏的:display:none. 某事件觸發后，才顯示，這就要用jquery的語句了：$('.bg').fadeIn(200);$('.content').fadeIn(400);
好了，就差不多了，很簡單吧，完整的代碼如下：
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .bg{display:none;position:fixed;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;} .content{display:none;width:500px;height:300px;position:fixed;top:50%;margin-top:-150px;background:#fff;z-index:3;left:50%;margin-left:-250px;} </style> <script type="text/javascript" src="js/jquery-1.10.2.min.js"> </script> <body> <p><div class="click1" style="color:red">點擊這里</div></p> <div> 下面是網頁的正文內容 blablabla </div> <div class="bg"></div> <div class="content"> <h1>歡迎新浪微博互粉！</h1> http://www.weibo.com/leavingseason <h1>相信音樂，相信五月天</h1> </div> <script type="text/javascript"> $(function(){ $('.click1').click(function(){ $('.bg').fadeIn(200); $('.content').fadeIn(400); }); $('.bg').click(function(){ $('.bg').fadeOut(800); $('.content').fadeOut(800); }); }); </script> </body> </html>
這種原生態的實現比較省事。還有一些插件可以提供類似的功能的。比如fancybox ： http://fancybox.net/
fancybox里面的demo比較好看，畢竟這是專業的嘛，大家感興趣不妨瀏覽一下。接口也很簡單，基本幾分鍾就學會了。
如果你想彈出來的是對話框，那么可以考慮試試jQuery UI: http://jqueryui.com/dialog/ . 這上面有好幾種對話框的形式。
還有一些插件，比如pop easy， thick box啊等等。但是要用插件嘛，畢竟會有些麻煩。有些插件它是收費的，就給你這么幾天的試用期；有些插件你也不好說它什么時候就不更新了，這對你的網頁的兼容性會有影響。所以啦，最好還是用我的第一種推薦方式了。