window.showModalDialog()(兼容ie的寫法)模式窗口, 一種很特別的窗口,當它打開時,后面的父窗口的活動會停止,除非當前的模式子窗口關(guān)閉了, 才能操作父窗口.在做網(wǎng)頁Ajax開發(fā)時,我們應(yīng)該有時會用到它來實現(xiàn)表單的填寫, 或做類似網(wǎng)上答題的窗口. 它的特點是,傳參很方便也很強大,可直接調(diào)用父窗口的變量和方法.

使用方法：

vReturnValue = window.showModalDialog(路徑 ， 可選參數(shù) ，框體的樣式) ；

*注：

谷歌瀏覽器不支持window.showModalDialog()方法，在谷歌瀏覽器中用window.open()方法解決這個問題；

參數(shù)傳遞

father.html

父接受子傳遞的內(nèi)容：

點擊

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;

}

子傳向父的內(nèi)容：

點擊

//設(shè)置父窗口的值

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：子頁面獲取父頁面?zhèn)魅氲闹敌枰忧熬Y兼容ie的寫法：

ie獲取父元素標簽 :window.dialogArguments.document.getElementsByName("txt10")[0].value；

其他瀏覽器(主要是chrome),獲取父元素標簽:

window.opener.document.getElementsByName("txt10")[0].value;

2：子頁面?zhèn)髦到o父頁面兼容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 ;

}

實際應(yīng)用場景

*當父頁面有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();

}

總結(jié)

以上是生活随笔為你收集整理的html5子页面无法弹出,弹出子页面，兼容ie的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。