效果如圖：

，

用法很簡(jiǎn)單：

<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>顯示網(wǎng)頁元素內(nèi)容</h3>
15 <a href="" class="ae">我的聯(lián)系方式</a>
16
17 <h3>能過 AJAX 加載另一個(gè)頁面</h3>
18 <a href="ajax.html" class="af">AJAX</a>
19
20 <h3>通過 iframe 顯示另一個(gè)頁面</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" 選擇了三個(gè)元素，但是這由于沒有設(shè)置 rel 屬性，所以 colorbox 只會(huì)顯示第一張圖片
3 */
4 $('.ab').colorbox();
5
6 /*顯示圖片組：
7 下面的代碼通過樣式選擇器 ".ac" 選擇了三個(gè)元素，這三個(gè)元素都設(shè)置了 rel 屬性，并組值相同，colorbox 會(huì)
8 把他們當(dāng)成一個(gè)圖片組來顯示
9 */
10 $('.ac').colorbox();
11
12 /*顯示圖片組：
13 下面的代碼通過樣式選擇器 ".ad" 選擇了三個(gè)元素，這三個(gè)選擇沒有設(shè)置 rel 屬性，但是程序?yàn)檫@些元素設(shè)置了
14 rel 屬性，所以 colorbox 也會(huì)把它們當(dāng)成一個(gè)組來顯示
15 */
16 $('.ad').colorbox({ rel: 'group2' });
17
18 /*顯示網(wǎng)頁元素內(nèi)容
19 這里需要設(shè)置兩個(gè)屬性，一個(gè)是 inline, 必須設(shè)置為 true, 另一個(gè)就是 href 屬性，需要把此屬性設(shè)置為
20 需要顯示元素的 ID 號(hào)，并在此 ID 號(hào)前加 # 號(hào)
21 */
22 $('.ae').colorbox({ inline:true, href: '#myContact' });
23
24 /*能過 AJAX 加載另一個(gè)頁面
25 通過 AJAX 加載另一個(gè)頁面只需要設(shè)置 href 屬性
26 */
27 $('.af').colorbox();
28
29 /*通過 iframe 顯示另一個(gè)頁面
30 在這里需要設(shè)置 iframe 屬性為 ture, 并要設(shè)置窗口的寬和高
31 */
32 $('.ag').colorbox({ iframe:true, width:600, height:500 });

轉(zhuǎn)載于:https://www.cnblogs.com/pfs1314/archive/2011/03/15/1985122.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。