Facebox弹窗插件

        Facebox是一个基于jQuery的，类似于Facebook和人人网的提示框，可以显示图片、divs或者其他任何远程的页面。它简单易用，看起来也很清爽。当然华丽还是需要你去实现的，它只提供一些方法和效果，比如渐入渐出显示层，折叠展开等，本例这个不很华丽，只是为了测试功能，非官方的实例，因此仅供大家参考，效果如上图所示，它是一个动画的登录框，点击时从页面中淡出。
按以下顺序加载所需的js和css：

<script src="jquery.js" type="text/javascript"></script>  
<link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>  
<script src="facebox/facebox.js" type="text/javascript"></script>  

然后在script块中加入如下代码：

jQuery(document).ready(function($) {  
  $(''a[rel*=facebox]'').facebox({  
    loadingImage:'loading.gif' ,  
    closeImage:'closelabel.gif'  
    });
})

facebox的第一个参数是一个对象，包含多个名值对。一般需要为其指定loading图片的地址和关闭按钮图片的地址，如上所示。

这样，所有rel属性值中含有子串”facebox”的a标记将成为Facebox的触发器，当点击它们时将弹出类似Facebook的弹出框。弹出框的内容由该a标记的href属性值指定，或者由facebox方法的参数指定，详细方法将在下文介绍。
附加的class

可以给facebox的容器指定附加的class属性值来调整其样式，对于获取的远程页面，这个特性尤其重要。附加class的方法是将相应标记的rel属性做以下修改：rel=”facebox[.classname]“，其中的的classname即为要附加的css的类名。例如：

<a href="remote.html" rel="facebox[.bolder]">text</a>  

Facebox的显示内容

Facebox弹出框所显示的内容可以由两种方式来设定，一种是由a标记的href属性值来指定，方法参加以上的示例，即：

    对于图片，设置其href属性值为图片地址；
    对于div，设置其href属性值为div的id；
    对于远程获取的页面，设置其href属性值为页面地址。

另一种方式是通过facebox方法的参数来指定，方法如下：

    简单的文本：jQuery.facebox(”something cool”);
    远程页面：jQuery.facebox({ ajax: ”remote.html” });
    图片：jQuery.facebox({ image: ”stairs.jpg” });
    同一页面中的标记：jQuery.facebox({ div: ”#box” });

如果要附加class，可以指定facebox的第二个参数，例如：

jQuery.facebox({ ajax: ''remote.html'' }, ''my-groovy-style'');  

同时还可以将函数作为facebox方法的每一个参数，这个函数通过完成Ajax调用，并将结果填充到Facebox提示框中，在操作完成前会自动显示一个loading图片，例如：

jQuery.facebox(function() {  
  jQuery.get(''code.js'', function(data) {  
    jQuery.facebox(''<textarea>'' + data + ''</textarea>'')  
  })  
})  

事件

Facebox还提供了多个事件，利用它们可以更方便地编程：

loading.facebox
beforeReveal.facebox
reveal.facebox，或afterReveal.facebox
init.facebox

使用时，只需要简单地绑定某个处理函数到这些事件上就可以上，如：

$(document).bind(''reveal.facebox'', function() {/*做一些事情*/})