??xml version="1.0" encoding="utf-8" standalone="yes"?>利用vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])Q我们可以打开一个模态窗口,该窗口的优点是限制用户只能对当前的页面进行操作,而对其父面不能q行操作Q常用于向导或者信息获取页面?br />
利用其中的vArguments我们可以在父面和弹出的面中进行参数的传递,参数可以定义的对象,也可以传递父面中Q何一个控件的引用Q这使得我们可以很容易的来操作父面中的各个元素Q得参数的传递变得非常容易?br />
1. 自定义对象参C?br />
我们可以定义一个javascript对象Q然后定义各U自定义属性的|然后可以此对象传递到子页面中?br />
如:爉面sender.htm源代码ؓQ?br />
<html>
<script>
function show()
{
var person = new Object();
person.myName=myName.value;
person.age = age.value;
person.country = country.value;
window.showModalDialog("target.htm",person,"");
}
</script>
<body>
<table>
<tr>
<td>
name:</td>
<td>
<input id="myName"></td>
</tr>
<tr>
<td>
age:</td>
<td>
<input id="age"></td>
</tr>
<tr>
<td>
country:</td>
<td>
<input id="country"></td>
</tr>
</table>
<br>
<input type="button" value="open" onclick="show()">
</body>
</html>
弹出的子面target.htm的源代码为:
<html>
<body>
<table>
<tr>
<td>
name:</td>
<td id="myName">
</td>
</tr>
<tr>
<td>
age:</td>
<td id="age">
</td>
</tr>
<tr>
<td>
country:</td>
<td id="country">
</td>
</tr>
</table>
</body>
<script>
var person = window.dialogArguments;
myName.innerText = person.myName;
age.innerText = person.age;
country.innerText = person.country;
</script>
</html>
上述的代码可以将爉面的信息装成一个对象,然后该对象传递给子页面?br />
2.爉面元素传?br />
以将爉面中元素对象的引用传递给子页面,通过该引用我们可以访问父面中的该元素对象?br />
Sender.htm源代码:
<html>
<script>
function show()
{
window.showModalDialog("target.htm",infoDiv,"");
}
</script>
<body>
<div id="infoDiv">
<table id="infoTable">
<tr>
<td>
name:</td>
<td>
<input id="myName"></td>
</tr>
<tr>
<td>
age:</td>
<td>
<input id="age"></td>
</tr>
<tr>
<td>
country:</td>
<td>
<input id="country"></td>
</tr>
</table>
</div>
<br>
<input type="button" value="conveyElement" onclick="show()">
</body>
</html>
Target.htm源代码:
//其中利用元素对象的引用我们可以操U늈面的元素对象的属性?br />
<html>
<body>
<div id="childDiv">
</div>
<script>
var infoDiv = window.dialogArguments;
</script>
<br>
<input type="button" value="showInnerHtml" onclick='childDiv.innerHTML=infoDiv.innerHTML'>
<br>
<input type="button" value="changePColor" onclick='infoDiv.style.backgroundColor="lightgreen"'>
</body>
</html>
]]>/*
获取URL中最后一参数的?br />
*/
var str=window.location.href;
//alert(str);
var es=/SouceID=/;
es.exec(str);
var right=RegExp.rightContext;
//alert(right);
//列子
<script language="javascript">
var str=window.location.href;
var es=/SouceID=/;
es.exec(str);
var right=RegExp.rightContext;
//alert(right);
switch(right){
case 'Din':
case 'Exh':
case 'Banks':
case 'Shop':
case 'Treat':
case 'Trip':
ChgTab('tab3','tabcontent3');
break;
case 'Air':
case 'Railway':
case 'Road':
case 'Subway':
ChgTab('tab2','tabcontent2');
break;
default:
ChgTab('tab1','tabcontent1');
}
</script>
//以下是函数的写法
function GetParam(){
var url = document.location.href;
var name=""
if (url.indexOf("=")>0)
{
name = url.substring(url.indexOf("=")+1,url.length)
}
return name;
}
/*
获取指定的URL参数?br />
URL:http://www.aygfsteel.com/blog?name=bainian
参数QparamName URL参数
调用Ҏ:getParam("name")
q回?bainian
*/
//1.
function getParam(paramName)
{
paramValue = "";
isFound = false;
if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=")>1)
{
arrSource = unescape(this.location.search).substring(1,this.location.search.length).split("&");
i = 0;
while (i < arrSource.length && !isFound)
{
if (arrSource[i].indexOf("=") > 0)
{
if (arrSource[i].split("=")[0].toLowerCase()==paramName.toLowerCase())
{
paramValue = arrSource[i].split("=")[1];
isFound = true;
}
}
i++;
}
}
return paramValue;
}
//2.
function Request(sName)
{
/*
get last loc. of ?
right: find first loc. of sName
+2
retrieve value before next &
*/
var sURL = new String(window.location);
var sURL = document.location.href;
var iQMark= sURL.lastIndexOf('?');
var iLensName=sName.length;
//retrieve loc. of sName
var iStart = sURL.indexOf('?' + sName +'=') //limitation 1
if (iStart==-1)
{//not found at start
iStart = sURL.indexOf('&' + sName +'=')//limitation 1
if (iStart==-1)
{//not found at end
return 0; //not found
}
}
iStart = iStart + + iLensName + 2;
var iTemp= sURL.indexOf('&',iStart); //next pair start
if (iTemp ==-1)
{//EOF
iTemp=sURL.length;
}
return sURL.slice(iStart,iTemp ) ;
sURL=null;//destroy String
}
]]>function cnLength(Str) {
var escStr = escape(Str);
var numI = 0;
var escStrlen = escStr.length;
for (i = 0; i < escStrlen; i++)
if(escStr.charAt(i) == '%')
if(escStr.charAt(++i) == 'u')
numI ++;
return Str.length+numI;
}
]]>
二、基本语法:
window.open(pageURL,name,parameters)
其中Q?br />
pageURL 为子H口路径
name 为子H口句柄
parameters 为窗口参?各参数用逗号分隔)
三、示例:
<SCRIPT>
<!--
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
//写成一?nbsp;
-->
</SCRIPT>
脚本q行后,page.html在新窗体newwindow中打开Q宽?00Q高?00Q距屏顶0象素Q屏?象素Q无工具条,无菜单条Q无滚动条,不可调整大小Q无地址栏,无状态栏?br />
请对照?br />
上例中涉及的为常用的几个参数Q除此以外还有很多其他参敎ͼ误四?br />
四、各参?br />
其中yes/no也可使用1/0Qpixel value为具体的数|单位象素?br />
参数 | 取D?nbsp;| 说明
| |
alwaysLowered | yes/no | 指定H口隐藏在所有窗口之?nbsp;
alwaysRaised | yes/no | 指定H口悬Q在所有窗口之?nbsp;
depended | yes/no | 是否和父H口同时关闭
directories | yes/no | Nav2?的目录栏是否可见
height | pixel value | H口高度
hotkeys | yes/no | 在没菜单栏的H口中设安全退出热?nbsp;
innerHeight | pixel value | H口中文档的像素高度
innerWidth | pixel value | H口中文档的像素宽度
location | yes/no | 位置栏是否可?nbsp;
menubar | yes/no | 菜单栏是否可?nbsp;
outerHeight | pixel value | 讑֮H口(包括装饰Ҏ)的像素高?nbsp;
outerWidth | pixel value | 讑֮H口(包括装饰Ҏ)的像素宽?nbsp;
resizable | yes/no | H口大小是否可调?nbsp;
screenX | pixel value | H口距屏q左边界的像素长?nbsp;
screenY | pixel value | H口距屏q上边界的像素长?nbsp;
scrollbars | yes/no | H口是否可有滚动?nbsp;
titlebar | yes/no | H口题目栏是否可?nbsp;
toolbar | yes/no | H口工具栏是否可?nbsp;
Width | pixel value | H口的像素宽?nbsp;
z-look | yes/no | H口被激zd是否在其它H口之上
window.showModalDialog使用手册
基本介绍Q?br />
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()Ҏ用来创徏一个显CHTML内容的模态对话框?br />
window.showModelessDialog()Ҏ用来创徏一个显CHTML内容的非模态对话框?br />
使用ҎQ?br />
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数说明Q?br />
sURL--
必选参敎ͼcdQ字W串。用来指定对话框要显C的文档的URL?br />
vArguments--
可选参敎ͼcdQ变体。用来向对话框传递参数。传递的参数cd不限Q包括数l等。对话框通过window.dialogArguments来取得传递进来的参数?br />
sFeatures--
可选参敎ͼcdQ字W串。用来描q对话框的外观等信息Q可以用以下的一个或几个Q用分号“;”隔开?br />
1.dialogHeight :对话框高度,不小于1Q0pxQテQ4中dialogHeight ?nbsp;dialogWidth 默认的单位是emQ而テQ5中是pxQؓ方便其见Q在定义modal方式的对话框Ӟ用px做单位?br />
2.dialogWidth: 对话框宽度?br />
3.dialogLeft: dq左的距R?br />
4.dialogTop: dq上的距R?br />
5.center: {yes | no | 1 | 0 }Q窗口是否居中,默认yesQ但仍可以指定高度和宽度?br />
6.help: {yes | no | 1 | 0 }Q是否显C帮助按钮,默认yes?br />
7.resizable: {yes | no | 1 | 0 } QテQ5Q]Q是否可被改变大。默认no?br />
8.status: {yes | no | 1 | 0 } QIE5+Q:是否昄状态栏。默认ؓyes[ Modeless]或no[Modal]?br />
9.scroll:{ yes | no | 1 | 0 | on | off }Q指明对话框是否昄滚动条。默认ؓyes?br />
下面几个属性是用在HTA中的Q在一般的|页中一般不使用?br />
10.dialogHide:{ yes | no | 1 | 0 | on | off }Q在打印或者打印预览时对话框是否隐藏。默认ؓno?br />
11.edge:{ sunken | raised }Q指明对话框的边框样式。默认ؓraised?br />
12.unadorned:{ yes | no | 1 | 0 | on | off }Q默认ؓno?br />
参数传递:
1.要想对话框传递参敎ͼ是通过vArguments来进行传递的。类型不限制Q对于字W串cdQ最大ؓ4096个字W。也可以传递对象,例如Q?br />
-------------------------------
parent.htm
<script>
var obj = new Object();
obj.name="51js";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
modal.htm
<script>
var obj = window.dialogArguments
alert("您传递的参数为:" + obj.name)
</script>
-------------------------------
2.可以通过window.returnValue向打开对话框的H口q回信息Q当然也可以是对象。例如:
------------------------------
parent.htm
<script>
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>
modal.htm
<script>
window.returnValue="http://www.51js.com";
</script>
币种定义部分
var psAddStr="ProcessID="+ProcessID+"&AddFlag="+isAddFlag+"&BZBH="+vsBZBH+"&BZMC="+vsBZMC+"&BZFH="+vsBZFH+"&JD="+vsJD;
var Result=window.showModalDialog("addSave.asp?"+psAddStr,'',"dialogHeight:250px;dialogWidth:250px;status:no;");
]]>
http://blog.csdn.net/listen/archive/2004/08/03/59953.aspx
用法:
1.dJS
2.dTABLE,注意的是Q一定要有ID,class?sortable"
OK,可以了,单的?/p>
如果觉得太单调,自己加点CSS吧,官方l出了改HEAD的CSS