jquery弹窗插件dialog

这几天工作上比较轻松，就想起了要写一个 jQuery 弹窗插件练练手。倒是实现了一些基本的功能，不过依然还有很多不完善的地方。

源码可以在我的 github 上进行查看：【github-dialog】

使用new $.wz.Dialog()即能调用出默认的窗口，同时，还对外提供了多个参数进行定制化：

{
  "width": "400", // 宽度
  "height": "300", // 高度
  "location": "center", // center, topleft(lefttop), topright(righttop), bottomleft(leftbottom), bottomright(rightbottom)
  "shade": true, // 是否需要遮罩
  "shadeClose": true, // 点击遮罩是否关闭弹窗
  "btn": [], // 要显示的按钮 {name:"确定" //按钮名称, close:false //点击后是否关闭弹窗, action:function(){} // 点击按钮要执行的方法}
  "ease": "fade", // 显示和隐藏形式
  "title": "提示框", // 弹窗标题
  "content": "内容加载中...", // 弹窗内容
  "countdown": 0 // 倒计时的时间，若小于等于0则表示不启动倒计时
}

我们来看下面的几个例子：

例子 1 #

创建一个弹窗，内容是“hello world”，同时还有两个按钮，确定按钮不能关闭弹窗，取消按钮可以关闭弹窗。

new $.wz.Dialog({
  content: "hell world",
  btn: [
    {
      name: "确定",
      close: false, // 不关闭弹窗
      action: function () {
        alert("确定按钮");
      },
    },
    {
      name: "取消",
      action: function () {
        alert("取消按钮");
      },
    },
  ],
});

运行

例子 2 #

创建一个弹窗，不要遮罩，右上角弹出

new $.wz.Dialog({
  content: "hell world",
  shade: false,
  location: "topright", // 'righttop'
  btn: [
    {
      name: "确定",
    },
  ],
});

运行

例子 3 #

创建一个弹窗，点击遮罩时不能关闭弹窗，采用倒计时关闭弹窗

new $.wz.Dialog({
  content: "hell world",
  shadeClose: false,
  countdown: 5, // 大于0则启动倒计时，否则关闭
});

运行

总结 #

在编写这个插件的过程中学到了很多的东西，没写的时候觉得写插件挺容易，可是真写起来发现就不是那么回事了。既然是插件，那就要考虑到通用的情况，把各种可能使用到的情况都考虑进去。不过依然还有很多改进的地方，比如：

• 在没有传入 title 的情况，应该默认隐藏 title
• 没有考虑IE6的兼容性
• 可能造成全局变量的污染，插件里是直接对.wz_dialog的 jQuery 元素进行操作的，若页面中存在相同的元素，则会受到这个插件的影响。

我会持续完善的，也希望各位能提出意见或建议。