模式对话框，可以很方便地在网页间传递数据，并且可以让用户进行线性操作，IE上的showModalDialog效果不错，但可惜其他浏览器又不支持，况且IE也远离了95%的市场占有率。网上有很多仿模式窗体，多数采用iframe技术，有的做得非常绚丽，可是我费了很大的劲却没有找到一个适合我需要的，有的不能随意弹出多级对话框，有的不能很好地传递参数，iframe模式的对话框不能打开比主窗体大的对话框，更有甚者，有的在对话框中只能使用静态网页（比如在话框中动态生成颜色列表就不能支持），当然，它们很适合一些具体的应用，比如有的用于展示图片就很适合。但模式对话框的核心还是实现线性操作、传递参数、界面操作的模块化。无赖之下，只有自己实现了一个，只有几十行代码，自认为比较精彩，可以非常容易地传递任何参数，可以轻易的打开多级对话框，在我的系统里使用良好。
所有代码如下:(另:代码演示和下载)
所有代码如下:(另:代码演示和下载)
//*************************************************************************************
//* p2cpdlg跨浏览器仿模式窗体： ***
//* Copyright(c) 2007 www.bokehou.com 雪域刀客 chinaxiaofei.cnblogs.com ***
//*************************************************************************************
//* 使用说明：
//* (1) 实现主窗体文档demo.html，如：
//* <html>
//* <head>
//* <title>主窗体</title>
//* <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//* <script type="text/javascript" src="p2cpdlg.js"></script>
//* <script type="text/javascript">
//* function dlg_open()
//* {
//* var arr = new Array();
//* arr["up01"] = "111";
//* arr["up02"] = "222";
//* p2cpdlg.dialogOpen('demo_testdialog.html',400,300,arr,"dlg_callback()","dialog_test");
//* }
//* function dlg_callback()
//* {
//* var arr = null;
//* arr = p2cpdlg.params_up;
//* if(arr != null)
//* {
//* window.alert("上传的参数："+arr["up01"]+","+arr["up02"]);
//* }
//* arr = p2cpdlg.params_down;
//* if(arr != null)
//* {
//* window.alert("下传的参数："+arr["dn01"]+","+arr["dn02"]);
//* }
//* }
//* </script>
//* </head>
//* <body>
//* <button onclick="dlg_open();">打开</button>
//* </body>
//* </html>
//* (2) 实现对话框文档demo_testdialog.html，如：
//* <html>
//* <head>
//* <title>仿模式对话框</title>
//* <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//* <script type="text/javascript">
//* //***对话框接口*****************************
//* function dlg_init()
//* {
//* var arr = window.opener.p2cpdlg.params_up;
//* if(arr != null)
//* {
//* input01.value = arr["up01"];
//* input02.value = arr["up02"];
//* }
//* }
//* function dlg_ok()
//* {
//* var arr = new Array();
//* arr["dn01"] = input01.value;
//* arr["dn02"] = input02.value;
//* window.opener.p2cpdlg.dialogClose(arr,true);
//* }
//* function dlg_cancel()
//* {
//* window.opener.p2cpdlg.dialogClose(null,false);
//* }
//* //******************************************
//* </script>
//* </head>
//* <body onload="dlg_init();" onunload="dlg_cancel();">
//* 参数1:<input id="input01" type="text" value="" size="6" />
//* 参数1:<input id="input02" type="text" value="" size="6" />
//* <button onclick="dlg_ok();">确定</button>
//* <button onclick="dlg_cancel();">取消</button>
//* </body>
//* </html>
//********************************************************************************************************
var p2cpdlg = new p2cp_dialog();
function p2cp_dialog()
{
this.params_up = new Array();
this.params_down = new Array();
this.callback = "";
this.win = null;
this.backid = "p2cp_dialog_backid";
//
this.dialogInit = function()
{
var back = document.getElementById(this.backid);
if(back == null)
{
var div = document.createElement("div");
div.innerHTML = "<div id='"+this.backid + "' onmouseup='p2cpdlg.dialogMouseUp();return false;' style='position:absolute;z-index:10000;top:0;left:0;width:1px;height:1px;background-color:#666666;-moz-opacity:0.7;filter:alpha(opacity=70);'></div>";
document.body.appendChild(div.firstChild);
}
};
this.dialogMouseUp = function()
{
if(this.win != null)
{
if(this.win.closed == false)
{
if (navigator.appName == "Microsoft Internet Explorer")
{
this.win.focus();
}
else
{
this.win.open().close();
this.win.focus();
}
}
else
{
this.dialogMin();
}
}
else
{
this.dialogMin();
}
};
this.dialogMin = function()
{
var back = document.getElementById(this.backid);
if(back != null)
{
back.style.width = "1px";
back.style.height = "1px";
}
};
this.dialogMax = function()
{
var back = document.getElementById(this.backid);
if(back != null)
{
var iWidth = document.body.scrollWidth;
if(iWidth < 1000)
{
iWidth = 1000;
}
var iHeight = document.body.scrollHeight;
if(iHeight < 1000)
{
iHeight = 1000;
}
back.style.width = iWidth + "px";
back.style.height = iHeight + "px";
}
};
this.dialogOpen = function(sUrl,iWidth,iHeight,arrUpParams,sCallBack,sWindowName)
{
this.params_up = arrUpParams;
this.params_down = null;
this.callback = sCallBack;
this.dialogInit();
this.dialogMax();
var left = (screen.availWidth-iWidth)/2;
var top = (screen.availHeight-iHeight)/2;
var sProps = 'menubar=0,location=0,status=no,dialog=yes,modal=yes,scrollbars=0,resizable=1,width='+ iWidth+',height='+iHeight+',left='+left+',top='+top;
if(this.win != null)
{
this.win.close();
this.win=null;
}
this.win = window.open(sUrl,sWindowName,sProps);
this.win.focus();
};
this.dialogClose = function(arrDownParams,bOk)
{
this.dialogMin();
if(this.win != null)
{
this.win.close();
this.win = null;
}
if(bOk)
{
this.params_down = arrDownParams;
eval(this.callback);
}
};
}
//* p2cpdlg跨浏览器仿模式窗体： ***
//* Copyright(c) 2007 www.bokehou.com 雪域刀客 chinaxiaofei.cnblogs.com ***
//*************************************************************************************
//* 使用说明：
//* (1) 实现主窗体文档demo.html，如：
//* <html>
//* <head>
//* <title>主窗体</title>
//* <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//* <script type="text/javascript" src="p2cpdlg.js"></script>
//* <script type="text/javascript">
//* function dlg_open()
//* {
//* var arr = new Array();
//* arr["up01"] = "111";
//* arr["up02"] = "222";
//* p2cpdlg.dialogOpen('demo_testdialog.html',400,300,arr,"dlg_callback()","dialog_test");
//* }
//* function dlg_callback()
//* {
//* var arr = null;
//* arr = p2cpdlg.params_up;
//* if(arr != null)
//* {
//* window.alert("上传的参数："+arr["up01"]+","+arr["up02"]);
//* }
//* arr = p2cpdlg.params_down;
//* if(arr != null)
//* {
//* window.alert("下传的参数："+arr["dn01"]+","+arr["dn02"]);
//* }
//* }
//* </script>
//* </head>
//* <body>
//* <button onclick="dlg_open();">打开</button>
//* </body>
//* </html>
//* (2) 实现对话框文档demo_testdialog.html，如：
//* <html>
//* <head>
//* <title>仿模式对话框</title>
//* <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//* <script type="text/javascript">
//* //***对话框接口*****************************
//* function dlg_init()
//* {
//* var arr = window.opener.p2cpdlg.params_up;
//* if(arr != null)
//* {
//* input01.value = arr["up01"];
//* input02.value = arr["up02"];
//* }
//* }
//* function dlg_ok()
//* {
//* var arr = new Array();
//* arr["dn01"] = input01.value;
//* arr["dn02"] = input02.value;
//* window.opener.p2cpdlg.dialogClose(arr,true);
//* }
//* function dlg_cancel()
//* {
//* window.opener.p2cpdlg.dialogClose(null,false);
//* }
//* //******************************************
//* </script>
//* </head>
//* <body onload="dlg_init();" onunload="dlg_cancel();">
//* 参数1:<input id="input01" type="text" value="" size="6" />
//* 参数1:<input id="input02" type="text" value="" size="6" />
//* <button onclick="dlg_ok();">确定</button>
//* <button onclick="dlg_cancel();">取消</button>
//* </body>
//* </html>
//********************************************************************************************************
var p2cpdlg = new p2cp_dialog();
function p2cp_dialog()
{
this.params_up = new Array();
this.params_down = new Array();
this.callback = "";
this.win = null;
this.backid = "p2cp_dialog_backid";
//
this.dialogInit = function()
{
var back = document.getElementById(this.backid);
if(back == null)
{
var div = document.createElement("div");
div.innerHTML = "<div id='"+this.backid + "' onmouseup='p2cpdlg.dialogMouseUp();return false;' style='position:absolute;z-index:10000;top:0;left:0;width:1px;height:1px;background-color:#666666;-moz-opacity:0.7;filter:alpha(opacity=70);'></div>";
document.body.appendChild(div.firstChild);
}
};
this.dialogMouseUp = function()
{
if(this.win != null)
{
if(this.win.closed == false)
{
if (navigator.appName == "Microsoft Internet Explorer")
{
this.win.focus();
}
else
{
this.win.open().close();
this.win.focus();
}
}
else
{
this.dialogMin();
}
}
else
{
this.dialogMin();
}
};
this.dialogMin = function()
{
var back = document.getElementById(this.backid);
if(back != null)
{
back.style.width = "1px";
back.style.height = "1px";
}
};
this.dialogMax = function()
{
var back = document.getElementById(this.backid);
if(back != null)
{
var iWidth = document.body.scrollWidth;
if(iWidth < 1000)
{
iWidth = 1000;
}
var iHeight = document.body.scrollHeight;
if(iHeight < 1000)
{
iHeight = 1000;
}
back.style.width = iWidth + "px";
back.style.height = iHeight + "px";
}
};
this.dialogOpen = function(sUrl,iWidth,iHeight,arrUpParams,sCallBack,sWindowName)
{
this.params_up = arrUpParams;
this.params_down = null;
this.callback = sCallBack;
this.dialogInit();
this.dialogMax();
var left = (screen.availWidth-iWidth)/2;
var top = (screen.availHeight-iHeight)/2;
var sProps = 'menubar=0,location=0,status=no,dialog=yes,modal=yes,scrollbars=0,resizable=1,width='+ iWidth+',height='+iHeight+',left='+left+',top='+top;
if(this.win != null)
{
this.win.close();
this.win=null;
}
this.win = window.open(sUrl,sWindowName,sProps);
this.win.focus();
};
this.dialogClose = function(arrDownParams,bOk)
{
this.dialogMin();
if(this.win != null)
{
this.win.close();
this.win = null;
}
if(bOk)
{
this.params_down = arrDownParams;
eval(this.callback);
}
};
}
浙公网安备 33010602011771号