jQuery插件floatbox浮动层实现javascript弹出浮动窗口功能

本期将继续介绍jQuery插件

上期在[jQuery插件ImageFlyout弹出图片实现javascript放大图片功能] 一文中使用jQuery插件ImageFlyout实现弹出图片效果，这里介绍一个jquery插件floatbox浮动层实现javascript弹出 浮动窗口功能，当点击链接后弹出一个新窗口打开一个HTML页面，支持Ajax动态加载，有fade褪色效果，jquery插件floatbox浮动层效 果图如下：

使用说明
需要使用jQuery库文件(目前版本1.3)和jQueryFloatbox库文件(目前版本1.0.7)

素材准备
浮动层CSS样式,控制jQuery Floatbox浮动层显示效果，增加javascript弹出浮动窗口外观。

实例代码
一,包含文件部分

1. <script type="text/javascript" src="jquery.js"></script>
2. <script type="text/javascript"  src="jquery.floatbox.js"></script>

二,HTML部分

1. <div id="content">
2. <p><a href="javascript:void(0);" id="biuuu-1">效果一：jquery插件floatbox浮动层 没有逐渐消失效果</a></p>
3. <p><a href="javascript:void(0);" id="biuuu-2">效果二：jquery插件floatbox浮动层 有逐渐消失效果</a></p>
4. <p><a href="javascript:void(0);" id="biuuu-3">效果三：jquery插件floatbox浮动层 有逐渐消失效果和ajax调用</a></p>
5. </div>

三,Javascript部分(jquery插件floatbox浮动层调用)

1. <script type="text/javascript" >
2. jQuery(function ($) {
3. $("a#biuuu-1").click(function () {
4. $.floatbox({content: "<p>必优博客 <br />技术源于实践，实践必然优秀！<br /> www.biuuu.com</p>" );
5. });
6. });
7. </script>

直接调用需要javascript弹出窗口的链接ID，如上：$("a#biuuu-1")，当点击定义链接时，jquery插件floatbox浮动层工具将弹出content部分，其中content为自定义HTML元素。

同时可给新窗口增加显示fade褪色效果，代码如下：

1. $("a#biuuu-2").click(function () {
2. $.floatbox({ content: "<p>必优博客 <br />技术源于实践，实践必然优秀！<br />www.biuuu.com</p>",
3. fade: true
4. });
5. });

弹出内容可ajax加载外部页面，调用jquery ajax，代码如下：

1. $("a#biuuu-3").click(function () {
2. $.floatbox({
3. ajax: {
4. url: "http://www.biuuu.com/",
5. params: "p=1",
6. before: "<p align='center'><img src='images/ajax-loader.gif' /></p>",
7. finish: function () {
8. alert("调用返回后的方法");
9. }
10. },
11. fade: true
12. });
13. });

各参数设置如下：
url表示调用外部链接，如上：http://www.biuuu.com/
params表示传给外部链接的参数，如上：p=1
before表示加载ajax时提示的加载提示，如上提示一张动态图片
finish表示加载成功后调用的方法或显示内容
fade表示弹出窗口和关闭窗口的效果

实例可知使用jquery插件floatbox浮动层实现javascript弹出浮动窗口功能非常简单，此功能非常实用，完全可以实现在新窗口弹出图片效果，调用方便，值得推荐。