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

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

jQuery软件测试IE浏览器CSS 
阅读更多
闲来无事做了一个前台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，赶紧删掉）
分享到：
| jquery 实现的一个简单tab 很实用。。
评论
52 楼 magus0803 2009-08-18  
楼主，这个东东很有帮助，不过我发现一个问题
在IE6下打开模态窗口，横向和纵向的滚动条就出来了。。然后滚动过去就没有被遮蔽。
在firefox3.5.2下没问题这个问题
51 楼 yyang1986321 2009-08-12  
不错啊lz，可惜源代码我看不大懂，只会调用插件，呵呵
50 楼 yyang1986321 2009-08-12  
firendlys 写道
我想请教一下,代码中的  $ 可否用其他变量来代替??
因为我的代码本身已经有一个函数$(obj){},而且这个函数是广泛使用的,不可能修改.
但这里出现两个 $ ,会造成变量名冲突,
有没有办法把 $ 改为其他? 比如 $$  ??

谢谢.

没用过jQuery吧？知道$ 是什么吗？
49 楼 tsxm 2009-08-12  
这个，诶发普及应用吧，我试了下，在弹框里面的那个特面根本收不到其他页面转发的request
48 楼 jsjnowstudy 2009-08-07  
我用的时候，跳出（aspx）topWin.$ is undefined
47 楼 willin2004 2009-08-06  
firendlys 写道
我想请教一下,代码中的  $ 可否用其他变量来代替??
因为我的代码本身已经有一个函数$(obj){},而且这个函数是广泛使用的,不可能修改.
但这里出现两个 $ ,会造成变量名冲突,
有没有办法把 $ 改为其他? 比如 $$  ??

谢谢.


使用jQuery=$就能解决,这是最基本的解决方法，不过我没有试验过，你可以试试的
46 楼 isflyer 2009-08-03  
<iframe id="left" name="left" frameborder="0"  allowtransparency="true" scrolling="no"  width="100%" height="1024" src="demo.html" >
                            抱歉，您的浏览器无法正常显示，请使用Firefox 3或IE6以上浏览器。
    </iframe>

ie8下，嵌入iframe问题比较大

找到原因了，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
用上面的可以

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
这个不行ie8下，其它浏览器没有这个情况
45 楼 mistful 2009-07-19  
什么时候能把　２个弹出框　第二个关闭不掉的ｂｕｇ修复啊。。。
44 楼 jackiezhu 2009-07-17  
div 不能100% 的显示!!!!

弹出的第二遮照框,关闭时,会把第一个也关闭掉  然后第一个会再弹出!!

浮动Div那个 不能随页面改动位置！！！
43 楼 jiangpan 2009-07-14  
如果上边的问题不能解决，这个代码实际应用中是没有多少意义啊
42 楼 jiangpan 2009-07-14  
不知大家试验过没有，如果我通过超链接直接转向的页面
例如<a href="test.jsp"></a>，在test.jsp 中写楼主的代码是可以的，但是我如果用struts的action转向的页面<a href="testAction.do"></a>，即:如果在testAction中转向了test.jsp，我在test.jsp中也是这样写的代码，但就会提示:topWin.$.DialogData 为空或不是对象,就弹不出来了 ，这是为什么？
41 楼 dugujiujian 2009-07-11  
lz
第二个弹出框连续点击"取消"两次会把父窗口也关闭的的bug好象没修改过
40 楼 liyh 2009-07-10  
确实不错，刚才下载了。
39 楼 长天飞鸿 2009-07-10  
弹两层窗口就有问题了，咋测试的啊
38 楼 firendlys 2009-07-09  
我想请教一下,代码中的  $ 可否用其他变量来代替??
因为我的代码本身已经有一个函数$(obj){},而且这个函数是广泛使用的,不可能修改.
但这里出现两个 $ ,会造成变量名冲突,
有没有办法把 $ 改为其他? 比如 $$  ??

谢谢.
37 楼 Howareyou73 2009-07-09  
好人啊 ，连源代码都提供了。
36 楼 tkl211 2009-07-08  
willin2004 写道
Rainbamboo 写道
看来楼主得再修复一个bug了，这个东东只能用在没有任何frameset的页面中，只要加上frameset,就出不来了,报topWin.$.DialogData为空或不是对象,我用ie6测试的



这个bug是不存在的，frameset中也是可以使用的，这里需要注意一个问题，就是在使用这个插件的页面的最顶端的页面需要导入js。

像你说的,我在最顶端的页面,引入那两个js,还是出问题... 额... IE6,火狐都测试过..
35 楼 golddragon 2009-07-08  
做的不错，有个小问题，楼上有提到了，就是tab键的处理，烦请楼主考虑一下
34 楼 willin2004 2009-07-08  
最近比较忙，好久没来看了，非常感谢大家对funkyUI的关心，我会努力更新的。。。。
33 楼 willin2004 2009-07-08  
Rainbamboo 写道
看来楼主得再修复一个bug了，这个东东只能用在没有任何frameset的页面中，只要加上frameset,就出不来了,报topWin.$.DialogData为空或不是对象,我用ie6测试的



这个bug是不存在的，frameset中也是可以使用的，这里需要注意一个问题，就是在使用这个插件的页面的最顶端的页面需要导入js。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics