JQuery实现的模态窗口

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

jQuery funkyUI plugin

 

测试代码如下：demo.html

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

jQuery funkyUI plugin

$(document).ready(function(){

});

function Block(){
$.funkyUI({
url:"1.html",
OKEvent:okEvent,
css:{width:"700",height:"500"}
});
}
function Block2(){
$.funkyUI({
showDialog:false
});
}
function okEvent(){
alert('ok被点击');
}
function Alert(){

$.alert("这是警告窗口")
}
function Confirm(){
$.confirm("这是个Boolean窗口");
}
function onalert(){
alert("没有block");
}
function block(){
$('#blocked').block();
}
function unblock(){
$('#blocked').unblock();
}

&&

123

Have a nice day!

2222222222222
3333333333333333


11111111111111111111111
11111111111111111111111
11111111111111111111111
11111111111111111111111
11111111111111111111111

Have a nice day!

 

 

 

参考代码说明
闲来无事做了一个前台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

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/22434610/viewspace-614966/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/22434610/viewspace-614966/