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

本文介绍了一个自定义的前端UI对话框组件,支持无限级弹出窗口、ESC退出、可拖动及模态对话框等功能,并兼容IE6-8及Firefox2.0。组件提供$.funkyUI等六个核心函数,易于集成。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

[b]软件功能:[/b]
* 无限级弹出窗口
* 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对象压入栈,这样不管我现在弹出了多少个窗口总能很容易的找到其中的任意一个的对象。

有感兴趣的把我的代码下载回去看看,然后给我提提意见,帮我提高。。。
觉得可用的随便用,有不明白的问我

新上传了修正版,修正了弹出框弹出位置不太精确的bug,新增无弹出窗体提示信息,用于类似Ajax请求等待。

再次上传修正版本2,此版本修正了二楼提出的bug,另外修复了进行局部block 后,弹出对话框不能正常unblock的bug

2009-7-8上传对ie6下不能遮挡select选框的修正版本(发现一个意想不到的bug,赶紧删掉)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值