window.showModalDialog()用法
window.showModalDialog()用法
1.定义
window.showModalDialog()用来创建模态对话框
语法为：vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])；
参数：
（1）sURL ：指定对话框要显示的文档的URL，字符串，必填
（2）vArguments：要向对话框传递的参数，变体（数组、变量等），选填
（3）sFeatures：生成对话框的外观信息，字符串，选填
参数 | 含义 | 说明 |
|---|---|---|
dialogHeight | 对话框高度 | 不小于100px |
dialogWidth | 对话框宽度 | |
dialogLeft | 离屏幕左的距离 | |
dialogTop | 离屏幕上的距离 | |
center | 是否居中 | 默认yes(yes:1,no:0) |
help | 是否显示帮助按钮 | 默认yes |
resizable | 是否可被改变大小 | 默认no |
status | 是否显示状态栏 | Modal默认no,Modeless默认yes |
scroll | 是否显示滚动条 | 默认为yes |
注意：
window.showModalDialog()只能在IE浏览器中使用，如果是chrome或者火狐浏览器，可以使用window.open()方法，window.open()的具体用法参考https://www.cnblogs.com/wugongzi/p/13438578.html这篇博文。
区别：
window.showModalDialog()和window.open()都可以打开页面，两者之间有什么区别？
用window.showModalDialog()打开窗口，只有等打开的窗口关闭后，才会执行后面的js代码（同步）；而window.open()打开窗口的同时就会继续往下执行代码（异步），所以如果你想等获取到子页面的值以后在去执行方法，建议使用showModalDialog()方法
2.用法
现在我们一起来看一下showModalDialog具体该如何使用
我们新建两个页面，放在同一个文件夹下面，名称分别为parent.html和child.html，分别代表父页面和子页面。在父页面中打开子页面窗口，并传递参数。子页面收到父页面传递过来的参数后进行输出，同时当子页面关闭时将返回值传递给父页面。父页面获取到返回值后进行输出。
parent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父页面——showModalDialog用法</title>
</head>
<body>
<div>
<button onclick="showDialog()">打开新窗口</button>
</div>
<script>
function showDialog() {
var message = "我是父页面的数据123";
var obj = window.showModalDialog("child.html", message, 'dialogWidth:300px;dialogHeight:380px;');
alert("返回的数据"+obj);
}
</script>
</body>
</html>child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="getMessage()">获取父页面传递过来的数据</button>
<script>
function getMessage() {
var message = window.dialogArguments;
alert(message);
window.returnValue="我是返回的数据abc";
}
</script>
</body>
</html>