现在的位置: 首页 > 综合 > 正文

20100516 学习记录 补前两天的showModalDialog

2013年04月26日 ⁄ 综合 ⁄ 共 3523字 ⁄ 字号 评论关闭

 当需要弹出窗口永远控制当前焦点,禁止访问父窗口的时候,可以使用模式窗口showModalDialog

不过,这家伙特麻烦,一堆毛病啊~ 真不好用

首先是总弹出新窗口,要在<head> 前面加上<base taget="_self">

然后在 showModalDialog窗口中再用window.open无能,于是最后退而求其次改为用iframe在本页面加载新页面,就业面invisible = =|||

调用的时候记得用parents。

参考链接:

http://www.360doc.com/content/10/0403/11/1119220_21410075.shtml 

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

在JS中打开新窗口一直在用open(),showModalDialog()几乎已被遗忘,showModalDialog和open一样也是3 个参数,showModalDialog(文件地址,window,窗口属性),open(文件地址,window,窗口属性)。

open打开的新窗口标题栏上可以看到 最小化 最大化按钮,而showModalDialog默认是没有的,只有一个小叉叉

open打开的新窗口可以鼠标可以点击父窗口的,showModalDialog只有把新打开的窗口关了鼠标的焦点才可触到父窗口(从某种程度上来说它就是个对话框)!

showModalDialog窗口属性的参数和open的窗口属性是有所区别的

open的窗口高度写法在此就不写了因为它和HTML代码的属性写法一样,下面看看showModalDialog的写法

open('http://hi.baidu.com/yp2010','window','width=100,height=100,..')
var v=showModalDialog('http://hi.baidu.com/yp2010',window,"dialogWidth:800px;dialogHeight:600px;center:yes;edge:raised ;scroll:yes;status:no;")

从上述代码可以看出showModalDialog有返回值。
dialogWidth:宽,dialogHeight:高,center:窗口位置,edge:边框样式,滚动条,状态栏minimize:yes;maximize:yes;最小化 最大化按钮。。

window.dialogArguments 可调用父窗口的方法
window.returnValue 传回父窗口的参数

要打开一个类似对话框的窗口就可用showModalDialog方法。
注:没有特别的要求下建议用open,用showModalDialog的话可能会遇到一些问题。

================================================================

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;
}
//

欢迎光临学网,收藏本篇文章 [1] [2]

$False$

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

<body>
<h3><a 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的执行机制。实际应用中需要举一反三才行呢。(完)

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

抱歉!评论已关闭.