jquery 半透明遮罩效果
阿新 • • 發佈：2019-01-03
首先談談最簡單的實現方式吧。準備兩個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啊等等。但是要用外掛嘛，畢竟會有些麻煩。有些外掛它是收費的，就給你這麼幾天的試用期；有些外掛你也不好說它什麼時候就不更新了，這對你的網頁的相容性會有影響。所以啦，最好還是用我的第一種推薦方式了。