弹窗插件elfAlert.js

elfAlert.js用于将页面内的元素以层的形式弹出并突出显示 弹窗插件jquery插件
试一试

UI精灵的小窗口

一个简单的实例

试一试将上面的窗口弹出
$("#thisWindow").elfAlert();
如何使用

1.引入插件

<script type="text/javascript" src="/media/js/libs/jquery.min.js"></script><!--jquery库-->
       <script type="text/javascript" src="/media/js/libs/jquery.elfAlert.js"></script><!--插件库-->

2.语法及参数

openValue={
      "fadeTime":300,//Number | 渐显毫秒,默认300 | 可选
      "mark":true,//Boolean | 是否生成遮挡层,默认生成 | 可选
      "markOpacity":0.15,//Number | 遮挡层透明度,默认0.15 | 可选
      "markColor":"#FFF",//String | 遮挡层背景色,默认"#FFF" | 可选
      "callback":false,//Function | 回调函数,默认false | 可选
      "callbackArr":null,//Array | 回调函数参数,数组格式,默认null | 可选
      "closeBtn":true,//Boolean | 弹出的元素右上角是否显示一个关闭按钮,默认显示 | 可选
      "animate":100//Number | 弹窗进场滑动的高度(像素),默认100px | 可选
      "linkLine":false//Boolean | 按钮与窗体之间创建一根连线,默认false | 可选
      "scroll":false//Boolean |是否允许滚动窗口,默认false | 可选
      };
      closeValue={
      "callback":false//Function | 回调函数,默认false | 可选
      };
      $(element).elfAlert(openValue);//弹出窗口
      $(element).elfAlertExit(closeValue);//关闭窗口
注意事项

1.如果参数closeBtn=true时,插件会在弹出层的右上角提供一个关闭按钮,如果想增加其它关闭按钮,只需将其它关闭按钮赋予class类"cancel"即可,例如:

<a class="cancel">关闭</a>

2.如果使用参数linkLine,需要取按钮事件event为实参,如果点击的按钮无法获取event(例如canvas中的按钮),那么需要自定义一个event,event的数据结构如下:

event={
        "type":"custom",
        "target":{
          "offset":function(){
            return {
            "left":0,//此处自定义
            "top":0//此处自定义
            };
          },
          "outerWidth":function(){
            return 0;//此处自定义
          }
        }
        }
代码下载

javascript开源代码请到github查看

责任声明
查看源网页