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元素进行操作的，若页面中存在相同的元素，则会受到这个插件的影响。

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