`
hua2142452
  • 浏览: 66360 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

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

阅读更多
闲来无事做了一个前台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对象压入栈,这样不管我现在弹出了多少个窗口总能很容易的找到其中的任意一个的对象。

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

觉得可用的随便用,有不明白的问我
分享到:
评论
5 楼 yekui 2011-05-09  
jquery的messager。js 也是使用同样的方式 实现的么??有什么区别的呀??
4 楼 yekui 2011-05-09  
楼主 我想问下 为什么要使用iframe压栈呀?
3 楼 yekui 2011-05-09  
sblig 写道
iframe里  top.$.alert //警告提示对话框

再firefox 3.6 里弹出后无法关闭



请教一下 top.$.messager.alert("");这种写法 是什么意思呢,特别是top 我在这样使用的时候 总是说top.$.messager不是对象 为什么啊 ,需要导入什么js文件么??
2 楼 sblig 2011-03-07  
iframe里  top.$.alert //警告提示对话框

再firefox 3.6 里弹出后无法关闭
1 楼 hunter123456 2010-07-21  
感谢分享,
有个问题请教一下。
我在1.html中加上
<input type="text"  name="c_name">
请问在点击确认时,在demo.html页面如果获得
input中的值!!

相关推荐

Global site tag (gtag.js) - Google Analytics