小賴的實戰記錄

因需求關係，用showModalDialog來開啟新增/修改畫面

而需求就因此產生，新增完或修改完，需要觸發父視窗的查詢按鈕，讓他重新refresh

再來一個需求是，我的子視窗必須要置中的問題

一一來說明，會遇到哪些機車的問題

第一點，你可能使用showModalDialog後，

子視窗在關閉前如果要觸發父視窗的話，應該會使用

javascript:虛擬碼
{
        父視窗.查詢按鈕.click();
        window.close();
}

此時會有一種靈異事件，沒有refresh

然後你用下列方式會refresh
javascript:虛擬碼
{
        父視窗.查詢按鈕.click();
}

百思不得其解，只好使出大賤招

我改為
 

 window.returnValue  = 'Y';                                              
 window.close();

利用傳回Y，讓父視窗判斷是否要觸動查詢按鈕

在父視窗使用showModalDialog後，判斷是否為Y然後觸發查詢按鈕事件
 

var returnValue = window.showModalDialog(url,window);
if(returnValue=='Y')
{
      $('#btnSearch').click();
      return false;
}

為何要加一個return false呢！因為你觸發了查詢按鈕，但也可能觸發了呼叫window.showModalDialog的那個button
也很神奇的，他可能只跑一個事件，所以觸發的是呼叫window.showModalDialog那個button讓他postback
所以使在太糟糕了。只好幹賤招。回傳false吧！讓他只觸發一個查詢按鈕事件就好了！

接著處理FireFox的置中問題

IE很容易，使用window.showModalDialog(url,window,'center:yes');
就可以解決了，
而FireFox說他支援center:yes，等你去玩了之後，才發現，騙肖ㄟ。

後來找到以下這篇文章，說明了支援的屬性比較表，其實只支援四種外觀屬性
http://cdmckay.org/blog/2009/07/07/how-to-kinda-fix-firefoxs-showmodaldialog/

然後他也提供超高級的解法，將原有的函式做一個擴充
而我就將他的函式註解翻譯為中文貼在此處給大家參考
 

//改變showModalDialog函式，使他變成置中
var oldShowModalDialog = window.showModalDialog;
window.showModalDialog = function(url, args, options) {
	// 轉換外觀選項成為物件陣列
	var pairs = options.replace(/\s+/g, "").split(";");
	var option = {};
	$.each(pairs, function() {
		var pair = this.split(":");
		if (pair.length != 2) return true;

		option[pair[0]] = pair[1];
	});

	// 取得視窗文件的寬度與高度
	var width = $(document).width();
	var height = $(document).height();

	// 取得子視窗寬度與高度
	var dialogWidth = option.dialogWidth.replace("px", "");
	var dialogHeight = option.dialogHeight.replace("px", "");

	// 計算需要位移多少長能夠置中
	// 置中運算
	var dialogLeft = (width - dialogWidth) / 2;
	var dialogTop = (height - dialogHeight) / 2;

	// 增加位移選項
	options += "dialogLeft: " + dialogLeft + "; ";
	options += "dialogTop: " + dialogTop + "; ";

	// 傳回呼叫函式
	return oldShowModalDialog(url, args, options);
};