jQuery插件FloatDialog浮动对话框

经常需要弹出对话框或弹出新窗口功能，实质上是实现一个对话框浮对效果，这里有一个非常酷的插件 JQuery Float Dialog浮动对话框，当点击链接时弹出一个浮动对话框，可自定义浮动对话框弹出速度、对话框全屏背景、弹出事件、弹出的方向等，对于需要制作交互性强 的网页来说使用FloatDialog功能非常强大，使用简单，先来看一下效果图：
jQuery插件FloatDialog浮动对话框

使用说明
需要使用jQuery库文件(1.3.2+)或FloatDialog库文件

需要自定义浮动对话框CSS样式，示例代码：

  1. <style>
  2. .disable_masking
  3. {
  4. z-index: 6001;
  5. position: absolute;
  6. display: none;
  7. }
  8. .closebutton
  9. {
  10. float: right;
  11. text-decoration: none;
  12. }
  13. </style>

使用实例
一，包含文件部分

  1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  2. <script type="text/javascript" src="jquery.floatdialog.js"></script>

二，HTML部分(简单浮对对话框效果)

  1. <a id="demo" href="javascript:void(0);">弹出浮动框</a>
  2. <div id="dialog">
  3. <a href="javascript:void(0);" class="closebutton">X</a>
  4. <h1>简单弹出浮动框效果</h1>
  5. <h2>这是一个JQuery Float Dialog v1.0演示</h2>
  6. <div class="data">
  7. ……必优博客浮动框效果内容区……
  8. &nbsp;<b><a href="#demo1viewsource" class="closebutton">查看源代码</a></b>
  9. </div>
  10. </div>

点击链接将弹出一个浮动对话框

三，javascript部分

  1. <script>
  2. $("#demo").floatdialog("dialog");
  3. </script>

上面是一个非常简单的示例，这个插件还有其它很多种效果，如下：
1，设置FloatDialog浮动对话框移动效果
[ default - down - up - left - right - slidedown ]
使用： $("#demo").floatdialog("dialog", {move: 'down'});

2，设置FloatDialog浮动对话框是否有特效
[ true - false ]
使用：$("#demo").floatdialog("dialog", {effect: false});

3，设置FloatDialog浮动对话框弹出速度
[ slow - fast - number ]
使用：$("#demo").floatdialog("dialog", {speed: 'fast'});

4，设置FloatDialog浮动对话框触发事件
[ click - mouseover 等 ]
使用：$("#demo").floatdialog("dialog", {event: 'mouseover'});

5，设置FloatDialog浮动对话框背景
[ color ]
使用：$("#demo").floatdialog("dialog", {backgroundcolor: 'red'});

6，设置FloatDialog浮动对话框关闭样式
$("#demo").floatdialog("dialog", {closeClass: '.myclosebutton'});

这几种效果可以综合使用，使用jQuery插件FloatDialog浮动对话框，轻松实现弹出一个浮动对话框功能，值得推荐。

点我查看jQuery插件FloatDialog浮动对话框在线演示