用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对象压入栈，这样不管我现在弹出了多少个窗口总能很容易的找到其中的任意一个的对象。

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

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

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

2009-7-8上传对ie6下不能遮挡select选框的修正版本（发现一个意想不到的bug，赶紧删掉）

评论

92 楼 汝亚莉 2014-06-17  

yangbaizhiyu 写道

感谢你提供这么好的插件，经过几天的研究和摸索，提几点在各楼主遇到的问题
1、对话框关闭问题：
   解决方法：将remove()方法中的
   //topWin.$._Array[topWin.$._Array.length-1].$.DialogData.dialogDiv.hide();
//topWin.$._Array[topWin.$._Array.length-1].$.DialogData.dialogDiv.fadeIn("fast");
//win.$.DialogData.dialogDiv.fadeOut("normal");
$('#_DialogDiv_'+opts.id).fadeOut("normal");
改为
topWin.$._Array[topWin.$._Array.length-1].$.DialogData.dialogDiv.show();
topWin.$._Array[topWin.$._Array.length-1].$.DialogData.dialogDiv.fadeIn("fast");
win.$.DialogData.dialogDiv.fadeOut("normal");
$('#_DialogDiv_'+opts.id).hide();
2、如何在frameset中使用？
   解决方法：在定义变量topWin时应该修改为：
    var topWin = window.name == ''? window.top:window.top.frames[window.name];
   修改//计算窗口的高宽和滚动条的位置,确保显示在屏幕正中间
    将这里的window.top修改为topWin
OK，问题可以解决了！

如果iframe外还有一层iframe怎么办

91 楼 握着橄榄枝的人 2011-10-28  

我是IE8，不能居中，而且弹出窗体后还能够滚动主窗口的滚动条。

90 楼 iamlomen 2010-05-16  

做的不错，顶一个，期待新作！（回复那些口水的楼层，多学习，少抱怨，大家都是从不懂到懂的，对别人苛刻的同时请回想下自己能否实现，如果能，请帖）

89 楼 willin2004 2010-05-06  

浏览器的alert是不能做得一摸一样的，但是编程没有那么古板，不一定非要像浏览器的alert一摸一样，实现其效果还有别的更灵活的方法，如声明一个带回调函数参数的alert函数，依然能实现一个alert执行完毕再执行下一个的效果

88 楼 xuanziday 2010-05-05  

楼主能做到模态模拟？？

貌似目前没有人能模态模拟出来吧？

你的alert能这样用么？

alert(1);alert(1);alert(1);alert(1)

执行的效果要想系统自带alert那样 必须等上一个alert执行完了之后再执行下一个

87 楼 aguai0 2010-05-04  

感觉还行啦，有点效果

86 楼 Jinghua 2010-03-16  

为什么我在IE8浏览器里点击任何弹出窗口按钮，页面就会死掉，FF下正常

85 楼 xiaobaozi 2010-03-05  

谢谢楼主分享呀！

84 楼 iceman_mylove 2010-03-02  

请问如何实现在frame中全部遮蔽的效果，现在只能遮蔽所在页面的效果，而且是按照整个页面计算的弹出位置，还不能居中，这些需要怎么解决啊，谢谢。

83 楼 终点阿虎 2010-02-24  

所有的层在IE6下不能全BODY 高度

82 楼 dostone 2010-02-01  

有个问题，在调用$.confirm 的时候，如果我点击“确定”，如何让它执行它的默认事件呢。
比如： <a href="http://www.sohu.com" title="" onclick="$.confirm("这是个Boolean窗口");">1111111111</a>
当前弹出对话框的时候，我点击”确定“，然后执行默认动作！

81 楼 happy-209 2010-02-01  

引用这个插件时, 希望在点击"确定按钮时"获取窗口中的多选框选中值, 如何操作? 帮忙...

80 楼 happy-209 2010-02-01  

请各位帮忙

79 楼 lyang0000 2010-01-22  

核心问题没有解决，只是模拟了一个弹出窗口而已，希望可以研究怎么实现完全的模态功能，这个不是先，alert框永远无法替代

78 楼 liua2003 2010-01-22  

function Block(){
$.funkyUI({
url:"1.html",
OKEvent:okEvent,
css:{width:"700",height:"500"}
});
}
想用这个插件用到项目中，但有些问题请教一下，点击弹出页面的【确定】时需要在okEvent中调用1.html页面中的js方法或表单元素，该怎么调用？谢谢。
我不熟悉jquery

77 楼 zhuweiliang 2010-01-21  

如果只想实现楼主的实现的功能的话，考虑一下 是否可以简化一下那个jquery。js 100K的js放到项目中，客户端下载需要时间啊~

76 楼 zhuweiliang 2010-01-21  

如果只想实现楼主的的功能话，jquyer.js 是否太大了，能否简化一下，100k的js 如果网络不好，用户会加载很长时间的。如果能简化js的话 那就万分感谢了！

75 楼 stuhack0303 2010-01-21  

请问楼主,怎么取到

当前window对象压入栈
full ?topWin.$._Array.push(window):null;
里的页面值呢？？

74 楼 happy-209 2010-01-21  

非常感谢  yangbaizhiyu  提出的问题解决方法。那正是我使用这个插件所感到困惑的地方。

73 楼 yxj2770 2010-01-18  

我一直在做JS的前台效果，用JS来做一个对话框我也已经做了很久！但一直有一个问题没有解决，就是弹出对话框后，后面的代码可以等待用户操作完后再进行处理的问题！我看过你的代码！也是没有解决这个问题！在点击后还是调用一个方法来实现的。现在我也是这么做的，我的按钮还是一个可以动态添加的对话框！
我看过很多JS对话框，不过没有一个可以实现这个功能！
不知，楼主有没有这方法的实战经验！
如果有的话可以共享一下吗？