用jQuery实现的模态弹出窗口，封装了alert和confirm

编程技术  /  houtizong 发布于 3年前   62

闲来无事做了一个前台UI的dialog组件，测试了一下运行良好，能支持IE6、7、8和firefox2.0，其他没测。调用也非常简单配置好相应参数就可以了。

软件功能：

* 无限级弹出窗口

* Esc退出block弹出窗口

* 可拖动窗口

* 模态窗口

* 模态alert警告对话框

* 模态confirm对话框

* 页面局部模态

* 绑定按钮响应函数

* 弹出窗口加载iframe

* 自定义背景样式

组件提供了六个函数：

$.funkyUI   // 弹出模态窗口

$.unfunkyUI // 关闭模态窗口

$.alert //警告提示对话框

$.confirm //确认和取消对话框

$.fn.block  //块模态

$.fn.unblock//解除块模态

调用示例：

$.blockUI({

url:"1.html",//弹出窗口显示的内容，使用iframe

OKEvent:okEvent,//okEvent是自定义的确定按钮响应函数，

css:{width:"700",height:"500"}

});

$.alert("这是警告窗口");

$.confirm("这是个Boolean窗口");

$('#blocked').block();//id为blocked的元素设置为只读

$('#blocked').unblock();//解除

实现的思路：

我在主窗体中创建一个层，用来作为弹出窗体，包含一个iframe，通过参数指定URL，作为显示的内容，我觉得可能会有利于代码的重用，代码管理起来要方便一些

弹出窗口中含有的弹出窗口也在主窗体中创建，这样结构简单一点，比较容易管理。我在创建弹出窗口的时候在主窗体中声明一个栈，把当前iframe的window对象压入栈，这样不管我现在弹出了多少个窗口总能很容易的找到其中的任意一个的对象。

有感兴趣的把我的代码下载回去看看，然后给我提提意见，帮我提高。。。

觉得可用的随便用，有不明白的问我