window.showModalDialog()(兼容ie的写法)模式窗口, 一种很特别的窗口,当它打开时,后面的父窗口的活动会停止,除非当前的模式子窗口关闭了, 才能操作父窗口.在做网页Ajax开发时,我们应该有时会用到它来实现表单的填写, 或做类似网上答题的窗口. 它的特点是,传参很方便也很强大,可直接调用父窗口的变量和方法.

使用方法：

vReturnValue = window.showModalDialog(路径 ， 可选参数 ，框体的样式) ；

*注：

谷歌浏览器不支持window.showModalDialog()方法，在谷歌浏览器中用window.open()方法解决这个问题；

参数传递

father.html

父接受子传递的内容：

点击

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

*{

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;

}

子传向父的内容：

点击

//设置父窗口的值

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 ;

}

}

子页面获取父页面的标签，并将自己的值赋值给父元素。

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();

}