window.showModalDialog(）（兼容ie的写法）模式窗口, 一种很特别的窗口,当它打开时,后面的父窗口的活动会停止,除非当前的模式子窗口关闭了, 才能操作父窗口.在做网页Ajax开发时,我们应该有时会用到它来实现表单的填写, 或做类似网上答题的窗口. 它的特点是,传参很方便也很强大,可直接调用父窗口的变量和方法.
使用方法：
vReturnValue = window.showModalDialog(路径 ， 可选参数 ，框体的样式) ；
*注：
谷歌浏览器不支持window.showModalDialog（）方法，在谷歌浏览器中用window.open（）方法解决这个问题；
参数传递
father.html
父接受子传递的内容：<input id="txt10" type="text" name="txt10"><br />
<button onclick="setPermission()">点击</button>
function setPermission() {
var url = "child.html";
//居中问题
var dialogLeftValue = screen.width / 2 - 200 + "px";
var returnValue;
//判断是否兼容Chrome浏览器
if (navigator.userAgent.indexOf("Chrome") > 0) {
var width = 600;
var height = 350;
var top = (window.screen.height - 30 - height) / 2;
var left = (window.screen.width - 30 - width) / 2;
window.open(url, self,"width=" + width + ",height=" + height +",top=" + top + ",left=" +left);
}else{
returnValue = window.showModalDialog(url, "", "dialogHeight:350px;dialogWidth:600px;status:0;dialogTop:100px;dialogLeft:" + dialogLeftValue);
}
}
child.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.tab{width:100%;height:100%;}
.tab-menu{height:42px;width:100%;background: rgba(170,255,245,0.5);}
.tab-menu ul{list-style:none;}
.tab-menu li{
display:block;width:100px;float:left;border:1px solid #ddd;padding: 10px 0;
text-align: center;
border-bottom: none;
}
.tab-box div{width:100%;display:none;}
/* 让第一个框显示出来 */
.tab-box div:first-Child{display:block;}
/* 改变选项卡选中时候的样式 */
.change{background:#fff;}
#btnFooter{
width: 100%;
height: 50px;
position: fixed;
bottom:0;
display: flex;
justify-content: flex-end;
}
</style>
</head>
<body scroll="no">
子传向父的内容： <input id="txt0" type="text" name="txt0"><br />
<button onclick="setFather()">点击</button>
</body>
<script src="ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
//设置父窗口的值
function setFather() {
if (navigator.userAgent.indexOf("Chrome") > 0) {
//获取元素之前必须用window.opener.
window.opener.document.getElementsByName("txt10")[0].value = document.getElementById("txt0").value ;
//获取父，中的对象
var mxwreport = window.opener.$("#ss").data("mxwreport");
}else{
window.dialogArguments.document.getElementsByName("txt10")[0].value = document.getElementById("txt0").value ;
}
}
</script>
</html>
子页面获取父页面的标签，并将自己的值赋值给父元素。
1：子页面获取父页面传入的值需要加前缀兼容ie的写法：
ie获取父元素标签 :window.dialogArguments.document.getElementsByName("txt10")[0].value；
其他浏览器（主要是chrome）,获取父元素标签:
window.opener.document.getElementsByName("txt10")[0].value;
2：子页面传值给父页面兼容ie的写法：（需要借助步骤1的获取方法，其实就是子页面的值传递给父页面）
if (navigator.userAgent.indexOf("Chrome") > 0){
//其他浏览器的写法
window.opener.document.getElementsByName("txt10")[0].value = document.getElementById("txt0").value
}else{
//IE浏览器的写法
window.dialogArguments.document.getElementsByName("txt10")[0].value = document.getElementById("txt0").value ;
}
实际应用场景
*当父页面有2个以上的地方点击弹框都是同一的时候，需要获取点击框的id，来辨别点击的谁，这个时候我们需要一个全局变量，并且这个全局变量必须添加window中，window.id= whichtable.id；
父页面中的js
function OpenSetFont(whichtable)
{
window.fontId = whichtable.id;
if (navigator.userAgent.indexOf("Chrome") <0){
var mikecatstr = window.showModalDialog(url,whichtable.value ,"dialogWidth:430px;dialogHeight:300px;help:no;status:no;scrollbar:no;");
}else{
openwindow(url,self,430,300)
}
if (mikecatstr == null)
return;
if (mikecatstr == "Cancel")
return;
whichtable.value = mikecatstr;
}
function return_OpenSetFont(mikecatstr){
if (mikecatstr == null)
return;
if (mikecatstr == "Cancel")
return;
document.getElementById(window.fontId).value=mikecatstr;
}
子页面点击确定按钮的js
function Enter()
{
var vFont = getFontCss();
if (navigator.userAgent.indexOf("Chrome") <0){
window.returnValue = vFont;
}else{
window.opener.return_OpenSetFont(vFont)
}
window.close();
}
