浅析js中的showModalDialog的实战应用

原创 2007年09月24日 11:42:00

IE提供的showModalDialog()方法是一个很好用的Web应用功能,虽然一般的网站应用不是很常见,但一旦涉及到企业应用级的Web开发则就很有用了。现在我用一个简单易懂的例子来说明一下:

这一应用需要两个web文件:

1、父窗口(也即用来控制弹出窗口的那个页面)
showModalDialog.html
---------------------------------------------------------------------------------------

 

<html>
<head>
<title>showModalDialog</title>
<script language="JavaScript">
<!--
//aInfo作为数组对象,将被showModalDialog传递出去
//
也可用var oMyobject=new Object();
//
oMyobject.firstProperty = value; oMyobject.lastProperty = value;的方式定义一个对象(firstProperty,lastProperty是自己按需定义的对象属性,可是任意取名并赋值)
var aInfo   = new Array(3);
aInfo[
0= "aaaaaaaaaaa";
aInfo[
1= "bbbbbbbbbbb";
aInfo[
2= "ccccccccccc";
var url = "dialog.html";
var sFeatures = "dialogWidth=500px;dialogHeight=500px;dialogLeft=0;dialogTop=0;";
/*sFeatures的各项可选参数:
*dialogWidth:弹出窗口的宽度;
*dialogHeight:弹出窗口的高度;
*dialogLeft:弹出窗口的左边距
*dialogTop:
*edge:sunken | raised
*center: yes|no|1|0|on|off
*dialogHide: yes|no|1|0|on|off
*help: yes|no|1|0|on|off
*resizable: yes|no|1|0|on|off
*scroll: yes|no|1|0|on|off
*status: yes|no|1|0|on|off
*unadorned: yes|no|1|0|on|off
*/

function showDialog(){
//弹出一个showModalDialog,并以returnValue来获取返回值
var returnValue = window.showModalDialog(url,aInfo,sFeatures);
if(returnValue!=null){
   
//for(var i=0;i<returnValue.length;i++){
    //document.all.info.innerHTML = returnValue[i]+"<br>";
   //}
   //输出返回值
   document.all.info.innerHTML=returnValue;
}
//

}
//-->
</script>
</head>

<body>
<h3><href="#" onclick="showDialog()">打开Dialog窗口</a></h3>
<div id="info"></div>
</body>
</html>


 

2、子窗口(即将被弹出的那个页面)
dialog.html
-----------------------------------------------------------------------------------------

<html>
<head>
<title>Dialog</title>
</head>

<body>
<script language="JavaScript">
<!--
//获取父窗口传来的对象(本例中就是父页面中的“oInfo”数组对象,也可用“window”对象,以便对父页面进行操作。总之,只要是object类型就成。)
var args = window.dialogArguments;
if(args!=null){
//document.write(args);
for(var i=0;i<args.length;i++){
   document.writeln(args[i]
+" "+(i+1)*10);
}
}
else{
document.writeln(
"对不起,参数为空");
}
//向父窗口返回的值
window.returnValue = "这是子窗口返回来的值";
//-->
</script>
</body>
</html>


--------------------------------------------------------------------

好了,运行showModalDialog.html即可看出其中的端倪来了。。。

通过这些工作,我实现了将值在父页面和子页面中的相互传递和处理。我想这也正是ms设计showModalDialog()方法的初衷之所在吧。当然,这个例子太简单了。但我的目的只是通过它了解showModalDialog的执行机制。实际应用中需要举一反三才行呢。(完)

 

js中的showModalDialog的实战应用

IE提供的showModalDialog()方法是一个很好用的Web应用功能,虽然一般的网站应用不是很常见,但一旦涉及到企业应用级的Web开发则就很有用了。现在我用一个简单易懂的例子来说明一下: 这...

JS之showModalDialog应用

window.showModalDialog传值并刷新父窗口示例 window.showModalDialog传值并刷新父窗口示例,father.html               ...

JS中showModalDialog 详细使用.txt

  • 2013年01月04日 17:55
  • 4KB
  • 下载

JS中ShowModalDialog(模态窗口)详细使用

基本介绍:           showModalDialog()         (IE 4+ 支持)           showModelessDialog()      (IE 5+ 支持...
  • tuobayi
  • tuobayi
  • 2016年12月23日 09:32
  • 6516

模态窗口 - showModalDialog打开窗口中获取父窗口js方法

1.父窗口操作子窗口父窗口JS代码:var parValue="现在显示了父窗口中的变量值";var hao="郝建卫"; function ShowDailog(PageHref,Title,Hei...

JS窗口问题处理:使弹出窗口保持前端显示的几种方法,及window窗体对象open()和showModalDialog()用法

用window.open打开一个窗口,怎么使它一直在父窗口的上面,除非点击自己设置的关闭按钮,我试了一下onblur="self.focus"好像不管用. 可使用: opened=window.o...

showModalDialog 访问父窗口,向父窗口返回值及undefined类型判断,js触发服务器控件事件

访问父窗口: var parent=window.dialogArguments; // 父页面路径 //frmAction.ActionRet...

js中showModalDialog 详细使用

基本介绍:           showModalDialog()         (IE 4+ 支持)           showModelessDialog()      (IE 5+ 支持...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:浅析js中的showModalDialog的实战应用
举报原因:
原因补充:

(最多只允许输入30个字)