window.showModalDialog(）（兼容ie的寫(xiě)法）模式窗口, 一種很特別的窗口,當(dāng)它打開(kāi)時(shí),后面的父窗口的活動(dòng)會(huì)停止,除非當(dāng)前的模式子窗口關(guān)閉了, 才能操作父窗口.在做網(wǎng)頁(yè)Ajax開(kāi)發(fā)時(shí),我們應(yīng)該有時(shí)會(huì)用到它來(lái)實(shí)現(xiàn)表單的填寫(xiě), 或做類似網(wǎng)上答題的窗口. 它的特點(diǎn)是,傳參很方便也很強(qiáng)大,可直接調(diào)用父窗口的變量和方法.
使用方法：
vReturnValue = window.showModalDialog(路徑 ， 可選參數(shù) ，框體的樣式) ；
*注：
谷歌瀏覽器不支持window.showModalDialog（）方法园骆，在谷歌瀏覽器中用window.open（）方法解決這個(gè)問(wèn)題；
參數(shù)傳遞
father.html
父接受子傳遞的內(nèi)容：<input id="txt10" type="text" name="txt10"><br />
<button onclick="setPermission()">點(diǎn)擊</button>
function setPermission() {
var url = "child.html";
//居中問(wèn)題
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;}
/* 讓第一個(gè)框顯示出來(lái) */
.tab-box div:first-Child{display:block;}
/* 改變選項(xiàng)卡選中時(shí)候的樣式 */
.change{background:#fff;}
#btnFooter{
width: 100%;
height: 50px;
position: fixed;
bottom:0;
display: flex;
justify-content: flex-end;
}
</style>
</head>
<body scroll="no">
子傳向父的內(nèi)容： <input id="txt0" type="text" name="txt0"><br />
<button onclick="setFather()">點(diǎn)擊</button>
</body>
<script src="ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
//設(shè)置父窗口的值
function setFather() {
if (navigator.userAgent.indexOf("Chrome") > 0) {
//獲取元素之前必須用window.opener.
window.opener.document.getElementsByName("txt10")[0].value = document.getElementById("txt0").value ;
//獲取父寓调，中的對(duì)象
var mxwreport = window.opener.$("#ss").data("mxwreport");
}else{
window.dialogArguments.document.getElementsByName("txt10")[0].value = document.getElementById("txt0").value ;
}
}
</script>
</html>
子頁(yè)面獲取父頁(yè)面的標(biāo)簽锌唾，并將自己的值賦值給父元素。
1：子頁(yè)面獲取父頁(yè)面?zhèn)魅氲闹敌枰忧熬Y兼容ie的寫(xiě)法：
ie獲取父元素標(biāo)簽 :window.dialogArguments.document.getElementsByName("txt10")[0].value夺英；
其他瀏覽器（主要是chrome）,獲取父元素標(biāo)簽:
window.opener.document.getElementsByName("txt10")[0].value;
2：子頁(yè)面?zhèn)髦到o父頁(yè)面兼容ie的寫(xiě)法：（需要借助步驟1的獲取方法晌涕，其實(shí)就是子頁(yè)面的值傳遞給父頁(yè)面）
if (navigator.userAgent.indexOf("Chrome") > 0){
//其他瀏覽器的寫(xiě)法
window.opener.document.getElementsByName("txt10")[0].value = document.getElementById("txt0").value
}else{
//IE瀏覽器的寫(xiě)法
window.dialogArguments.document.getElementsByName("txt10")[0].value = document.getElementById("txt0").value ;
}
實(shí)際應(yīng)用場(chǎng)景
*當(dāng)父頁(yè)面有2個(gè)以上的地方點(diǎn)擊彈框都是同一的時(shí)候，需要獲取點(diǎn)擊框的id痛悯，來(lái)辨別點(diǎn)擊的誰(shuí)余黎，這個(gè)時(shí)候我們需要一個(gè)全局變量，并且這個(gè)全局變量必須添加window中载萌，window.id= whichtable.id惧财；
父頁(yè)面中的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;
}
子頁(yè)面點(diǎn)擊確定按鈕的js
function Enter()
{
var vFont = getFontCss();
if (navigator.userAgent.indexOf("Chrome") <0){
window.returnValue = vFont;
}else{
window.opener.return_OpenSetFont(vFont)
}
window.close();
}
