【問題與解決】showModalDialog is not defined 的解決方案

背景：

showModalDialog 是比較老的方法了，有些瀏覽器不再支持彈出模態視窗了。

比如說谷歌瀏覽就不再支持了，有文章說明如下：

Chrome’s Lack of Support for showModalDialog Breaks Some Enterprise Web Apps

彈出視窗代碼：

var obj = new Object();  
var retval = window.showModalDialog("request.aspx",obj,"dialogWidth=500px;dialogHeight=300px"); 
if (retval == null) {
...
}else {
...
}

瀏覽器報錯：

Uncaught TypeError: undefined is not a function

其中有些臨時解決辦法，但貌似showModalDialog不會回來了。

問題解決

常見的彈出視窗有div模擬或者用window.open代替，對於一個已經在用的系統來說，採用div方式轉換成本較高，採用window.open改動會更少一些，但也會丟失其模態性。

這裡採用簡單的window.open方案，畢竟替換成本低很多。針對上文中提到的showModalDialog使用方式，替換為：

var iWidth = 500; 
var iHeight = 300; 
var iTop = (window.screen.availHeight - 30 - iHeight) / 2; 
var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; 
var win = window.open("request.aspx", "彈出視窗", "width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft + ",toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no,alwaysRaised=yes,depended=yes");

參數說明

dialogWidth:對話框寬度。 
dialogLeft:距離桌面左的距離。 
dialogTop:離桌面上的距離。 
center:{yes|no|1|0}：視窗是否居中，預設yes，但仍可以指定高度和寬度。 
help:{yes|no|1|0}：是否顯示幫助按鈕，預設yes。 
resizable:{yes|no|1|0}［ＩＥ５＋］：是否可被改變大小。預設no。 
status:{yes|no|1|0}［IE5+］：是否顯示狀態欄。預設為yes[Modeless]或no[Modal]。 
scroll:{yes|no|1|0|on|off}：指明對話框是否顯示滾動條。預設為yes。 還有幾個屬性是用在HTA中的，在一般的網頁中一般不使用。 
dialogHide:{yes|no|1|0|on|off}：在列印或者列印預覽時對話框是否隱藏。預設為no。 
edge:{sunken|raised}：指明對話框的邊框樣式。預設為raised。 
unadorned:{yes|no|1|0|on|off}：預設為no。

採用這種方式就可以打開一個和之前使用showModalDialog差不多的視窗。但是怎麼返回值呢？

在彈出頁面中有兩種方式：

1、直接設置父視窗的DOM對象的值。

window.opener.document.getElementById(“parentWindowControlId”).value = "數據";

父視窗中應該有一個id為parentWindowControllId的DOM元素。

2、調用父視窗中的Javascript函數，由父視窗進行相應的處理。

var obj = { id:"id", name:"name" };  window.opener.DoAfterXXX(obj);

父視窗提供一個DoAfterXXX的函數就可以了。

長遠來看window.open由於其用戶體驗問題必將走向沒落，還是儘快轉移為好。