效果如圖：

，

用法很簡單：

<link href="admin/colorbox.css" rel="stylesheet" type="text/css" />
<script src="admin/jquery.colorbox.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#atest").colorbox({ width: "600px", inline: true, href: "#blogrollSettings" });
});
</script>

也可做圖片的幻燈效果，類似于lightbox:

View Code 1 <h3>顯示單張圖片</h3>
2 <a href="001.jpg" class="ab" title="image1">圖片 1</a> <br>
3 <a href="002.jpg" class="ab" title="image2">圖片 2</a> <br>
4 <a href="003.jpg" class="ab" title="image3">圖片 3</a>
5 <h3>顯示圖片組</h3>
6 <a href="001.jpg" class="ac" rel="group1" title="image1">圖片 1</a> <br>
7 <a href="002.jpg" class="ac" rel="group1" title="image2">圖片 2</a> <br>
8 <a href="003.jpg" class="ac" rel="group1" title="image3">圖片 3</a>
9 <h3>顯示圖片組2</h3>
10 <a href="001.jpg" class="ad" title="image1">圖片 1</a> <br>
11 <a href="002.jpg" class="ad" title="image2">圖片 2</a> <br>
12 <a href="003.jpg" class="ad" title="image3">圖片 3</a>
13
14 <h3>顯示網頁元素內容</h3>
15 <a href="" class="ae">我的聯系方式</a>
16
17 <h3>能過 AJAX 加載另一個頁面</h3>
18 <a href="ajax.html" class="af">AJAX</a>
19
20 <h3>通過 iframe 顯示另一個頁面</h3>
21 <a href="http://www.google.com" class="ag">iframe</a>
22
23 <div style="display:none">
24 <div id="myContact">
25 Hello, colorbox!!!
26 </div>
27 </div>

View Code 1 /*顯示單張圖片：
2 下面的代碼通過樣式選擇器 ".ab" 選擇了三個元素，但是這由于沒有設置 rel 屬性，所以 colorbox 只會顯示第一張圖片
3 */
4 $('.ab').colorbox();
5
6 /*顯示圖片組：
7 下面的代碼通過樣式選擇器 ".ac" 選擇了三個元素，這三個元素都設置了 rel 屬性，并組值相同，colorbox 會
8 把他們當成一個圖片組來顯示
9 */
10 $('.ac').colorbox();
11
12 /*顯示圖片組：
13 下面的代碼通過樣式選擇器 ".ad" 選擇了三個元素，這三個選擇沒有設置 rel 屬性，但是程序為這些元素設置了
14 rel 屬性，所以 colorbox 也會把它們當成一個組來顯示
15 */
16 $('.ad').colorbox({ rel: 'group2' });
17
18 /*顯示網頁元素內容
19 這里需要設置兩個屬性，一個是 inline, 必須設置為 true, 另一個就是 href 屬性，需要把此屬性設置為
20 需要顯示元素的 ID 號，并在此 ID 號前加 # 號
21 */
22 $('.ae').colorbox({ inline:true, href: '#myContact' });
23
24 /*能過 AJAX 加載另一個頁面
25 通過 AJAX 加載另一個頁面只需要設置 href 屬性
26 */
27 $('.af').colorbox();
28
29 /*通過 iframe 顯示另一個頁面
30 在這里需要設置 iframe 屬性為 ture, 并要設置窗口的寬和高
31 */
32 $('.ag').colorbox({ iframe:true, width:600, height:500 });

轉載于:https://www.cnblogs.com/pfs1314/archive/2011/03/15/1985122.html

總結

以上是生活随笔為你收集整理的Jquery colorbox不错的遮罩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。