Jquery colorbox不错的遮罩

效果如图：

，

用法很简单：

<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({  "600px", inline: true, href: "#blogrollSettings" });
});
</script>

也可做图片的幻灯效果，类似于lightbox:

<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>

/*显示单张图片：
 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, 600, height:500 });