JS 模態對話框和非模態對話框操作技巧總結_基礎知識

模態視窗javascript 技巧匯總（傳值、開啟、刷新）
1、要彈出的頁面中，一定要保證

標籤間有，否則會彈出的模態視窗上，點擊按鈕時，會再次彈出一個新頁面。
2、被彈出頁面的按鈕的事件處理中，應該有Response.Write(new Function().ClosePage());語句，用以關閉目前的模態視窗。
3、因為幽默的快取原因，如果你在模態視窗中修改了數據，你會發現，父頁上的數據刷新了，但是當你再點擊按鈕，重新彈出模態視窗時，你會發現模態視窗中的內容還是上次的內容，經過我試驗，手動改了html程式碼後，點擊彈出的模態視窗還是彈出相同的頁面，所以，這裡要繞過這個機制，方法是在被彈出的aspx頁面後面加上隨機參數。上面模態視窗程式碼可以改成如下，以避免此問題：

複製程式碼 程式碼如下:

public string ModalWindow(string openAspxPage,int width,int height)
{
string js = string.Format("javascript:window.showModalDialog("{0}&rand=" new Random().Nextwindow.showModalDialog("{0}&rand=" new Random().Next Random().Next Random().Next Random().Next Random().Next Random().Next Random().Next Random().Next Random().Next Random().Next Random().Next Random ().ToString() "",window,"status:false;dialogWidth:{1}px;dialogHeight:{2}px")",openAspxPage,width,height);
return js;
}

注意紅字部分參數，是自訂的一個參數，此參數應該是整個專案中唯一的變更名稱，並且無意義(最保險的辦法是把這個變更命名為lakjsdflawdfqwoifa之類的名稱)。
基本上，滿足了上述條件，做頁面時就操作模態窗口，相對就簡單了。
//--------------------------------------------- -------------------------------------------------- --------------
模態視窗－有時會讓你覺得很好用的一個東西
關於showModalDialog和showModelessDialog的使用，一個b/s結構的項目中用window.open彈出的視窗被一些廣告攔截工具給攔截了，沒辦法就只能用showModalDialog來解決問題，但showModalDialog這個方法不好的就是頁間傳值太麻煩(傳值有兩種方法) ，可是實在沒其他的辦法來解決這個攔截問題，只有用這個了。程式碼到是兩下就寫好了，但調試程式碼的時候發現一個問題，用showModalDialog彈出的視窗中的內容一直是第一次訪問頁面時顯示的內容，開始就懷疑是窗體調用的頁面緩存，最後透過單步驟追蹤調試也證明了問題確實是讀取的頁面緩存，這說明了在asp.net中用showModalDialog和showModelessDialog做彈出窗體時最好在page_load事件加上

複製程式碼 程式碼如下:

Response.Expires = 0;
Response.Cache.SetNoore() Response.AppendHeader("Pragma", "no-cache");


來清除快取。用asp，php，js，vbscript測試使用showModalDialog方法沒有出現需要清除快取的狀況，大家可以放心使用，關於showModalDialog的時候可以參考下面我找到的詳細介紹
showModalDialog和showModelessDialog使用心得
一、 showModalDialog和showModelessDialog有什麼不同？
　　showModalDialog：被開啟後就會始終保持輸入焦點。除非對話方塊關閉，否則使用者無法切換到主視窗。類似alert的運作效果。
　　showModelessDialog：被開啟後，使用者可以隨機切換輸入焦點。對主視窗沒有任何影響(最多是被擋住一下而以。:P)
二、怎樣才讓在showModalDialog和showModelessDialog的超連接不彈出新視窗？
　　在被開啟的網頁裡加上就可以了。這句話一般是放在和之間的。
三、怎樣才刷新showModalDialog和showModelessDialog裡的內容？
　　在showModalDialog和showModelessDialog裡是不能按F5刷新的，又不能彈出選單。這只能靠javascript了，以下是相關程式碼：

reload...
　　將filename.htm替換成網頁的名字然後將它放到你打開的網頁裡，按F5就可以刷新了，注意，這個要配合使用，不然你按下F5會彈出新視窗的。
注意:如果想當訪問的時候自動刷新,可以在被打開得頁面,設置一個記錄變量,當被打開模態窗口得時候,變量至1,然後使用上述方法刷新模態窗口,當關閉視窗得時候,變數至0.
四、如何用javascript關掉showModalDialog(或showModelessDialog)開啟的視窗。
　　
　　也要配合，不然會開啟新的IE窗口，然後再關掉的。
五、showModalDialog和showModelessDialog資料傳遞技巧。
　　範例：
　　　　現在需要在一個showModalDialog(或showModelessDialog)裡讀取或設定一個變數var_name
　　　　　　　　　　　　　　、　　　　　、　　〟　〟　〟　〟　〟　〟、　〟　〟　〟　〟、　　〟　〟〟〟〟〟〟〟、　　〟　、　、都有一般方式： ModalDialog("filename.htm",var_name)
　　　　　　　　//傳遞var_name變數
　　　　　　在showModalDialog(或showModelessDialog)讀取和設定時：[4]45] _name變數
　　　　　　　　window.dialogArguments="oyiboy"//設定var_name變數
　　　　這種方式是可以滿足的，但是當你想在操作var_name同時再操作第二個變理var_id時呢？就無法再進行操作了。這就是這種傳遞方式的限制。
　　　　
　　　　　　　　　
　　　　　　　。window.　　　　　　　〔window.　　　//不管要操作什麼變量，只直傳遞主視窗的window物件
　　　　　　在showModalDialog(或showModelessDialog)讀取與設定時：
　　　　　　　　　　ydialog　　　　　　》　。　　window.dialogArguments.var_name="oyiboy"//設定var_name變數
　　　　　　　　同時我也可以操作var_id變數
　　　　　　　　alert(window.dialogArguments.var_id)///var　　alert(window.dialogArguments.var_id)///var　　alert(window.dialogArguments.var_id)///var　合　alert(win　diaf. Arguments.var_id="001"//設定var_id變數
　　　　　　　　同樣還可以對主視窗的任何物件進行操作，如form物件裡的元素。
　　　　　　　　window.dialogArguments.form1.index1.value="這是在設定index1元素的值"
在彈出視窗中傳回值：window.returnValue = ... ;
六多的Mode相互操作。
　　以下程式碼的主要作用是在一個showModelessDialog裡移動別一個showModelessDialog的位置。
　　主檔案的部份js程式碼。
　　var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px"） //開啟控制視窗
　　var s2=ModelessDialog('about:blank',window," 200px;dialogLeft:300px"）　　//開啟被控制視窗
　　控制.htm的部份代碼。




複製程式碼

程式碼如下:

　　<script> <BR>　　　　//操作位置數據，因為視窗的位置數據是"xxxpx"方式的，所以需要這樣的一個特殊操作函數。 <BR>function countNumber(A_strNumber,A_strWhatdo) <BR>{ <BR>A_strNumber=A_strNumber.replace('px','') <BR>A_strNumber-=0 <BR> >case "-":A_strNumber-=10;break; <BR>case " ":A_strNumber =10;break; <BR>} <BR>return A_strNumber "px" <BR>} <BR>　　</script>
　　
　　button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'-')" value="左移">
　　window. dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,' ')" value="右移">
　　


　　以上關鍵部份是：

　　　　視窗命名方式：var 部分是：
　　　　視窗命名方式：var s1=showModevarialog( ',window,"dialogTop:1px;dialogLeft:1px"）
　　　　變數存取方式：window.dialogArguments.s2.dialogTop
　　　變數存取方式：window.dialogArguments.s2.dialogTop
　　　這個例子只是現實在「ModelessDialog showModelessDialog之間相互控制各自的顯示頁面，傳遞變數和資料等。這要看各位的發揮了。
=============================================== =====================
window.showModalDialog()方法用來建立一個顯示HTML內容的模態對話框。
window.showModelessDialog()方法用來建立一個顯示HTML內容的非模態對話框。
使用方法：
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures] sURL--必選參數，類型：字串。用來指定對話方塊要顯示的文件的URL。
vArguments--可選參數，類型：變體。用來向對話框傳遞參數。傳遞的參數類型不限，包括陣列等。對話框透過window.dialogArguments來取得傳遞進來的參數。
sFeatures-- 可選參數，類型：字串。用來描述對話框的外觀等訊息，可以使用以下的一個或幾個，用分號「;」隔開。
1.dialogHeight :對話框高度，不小於100px，IE4中dialogHeight 和dialogWidth 預設的單位是em，而IE5以上是px，為方便其見，在定義modal方式的對話框時，用px做單位。
2.dialogWidth: 對話框寬度。
3.dialogLeft: 離螢幕左的距離。
4.dialogTop: 離螢幕上的距離。
5.center: {yes | no | 1 | 0 }：視窗是否居中，預設yes，但仍可指定高度和寬度。
6.help: {yes | no | 1 | 0 }：是否顯示幫助按鈕，預設yes。
7.resizable: {yes | no | 1 | 0 } 〔IE5＋〕：是否可被改變大小。預設no。
8.status: {yes | no | 1 | 0 } 〔IE5 〕：是否顯示狀態列。預設為yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }：指明對話框是否顯示捲軸。預設為yes。
以下幾個屬性是用在HTA的，在一般的網頁中一般不使用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }：在列印或列印預覽時對話方塊是否隱藏。預設為no。
11.edge:{ sunken | raised }：指明對話框的邊框樣式。預設為raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }：預設為no。