一般說來各位在設計網頁時，若有用到「表單」功能來做資料往返的功能時，常常會用到視窗內的彈跳功能來告知使用者目前資料處理的狀態。
而一般Client端處理的Script大都是用java script來實現表單處理的工作，但是當某個專案變的比較大型時，我們都會用彈跳視窗來簡化資料處理的步驟或是讓使用者更容易的注目於資料處理狀況。
在javascript中的彈跳視窗常用的函數叫做
window.open();
這或許似乎有這項功能就可以偷些懶，只要將這個函數用opener.[object]閉該視窗後即可回傳。
但，它無法將彈跳視窗置於最上層，也就是說它尚無法always on top，你去按別的視窗它還是會被下壓，除非你要去乎叫window.focus();，它才會被叫出最上層，如果你用timer();去定時讓它於最頂層也不是個辦法。所以，在ＩＥ４出來之後，它新增了這兩個可以置頂的函數，分別是showModalDialog()與showModelessDialog() 。
該如何使用？很簡單，你只要下這個指令：
window.showModalDialog(『ABC.html』, window);
或是
window.showModalessDialog(『ABC.html』, window);
這兩個有什麼差別？第一個是ie4可用，第二個是ie4跟ie5可用，再來差別是第一個函數是強迫焦點於新視窗上，你無法去處理父視窗上的其它工作，也就是說，你的滑鼠只在這新視窗上才能動作。而第二個函數是除了新視窗會一直置頂之外，你還可以在父視窗中處理其它工作，如捲動網頁、按下一頁。
第一個會比較來的有用處，因為此用意就是要先完成新視窗上的工作直到視窗關閉，才可執行下一個工作，這樣子，的資料處理「順序」才會流暢，不然，使用第二個函數將會讓使用者不小心離開網頁而視窗一同關閉。當然，看你開發的用意在哪裡，每個函數存在都有它的生存意義的。
但，在這個新視窗上按下submit時，它將會再開新視窗，這就就會覺的開新的視窗也太多了吧！所以您只要在新視窗的網頁中在＜ｂｏｄｙ＞下方加上這個標籤：
＜base target=’_self’;＞
它即可在同一視窗中執行下一頁的工作。
其函數完整的說明如下：
使用方法：
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
參數說明：
sURL–
必選參數，類型：字符串。用來指定對話框要顯示的文檔的URL。
vArguments–
可選參數，類型：變體。用來向對話框傳遞參數。傳遞的參數類型不限，包括數組等。對話框通過window.dialogArguments來取得傳遞進來的參數。
sFeatures–
可選參數，類型：字符串。用來描述對話框的外觀等信息，可以使用以下的一個或幾個，用分號“;”隔開。
- dialogHeight :對話框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默認的單位是em，而ＩＥ５中是px，爲方便其見，在定義modal方式的對話框時，用px做單位。
- 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。
接下來，如果想要將新視窗的表單值也能返回母視窗，程式碼範例如下：
父視窗網頁：
＜form id=』Form1″＞
回傳值：＜input type=』text』 id=』getval』 readOnly＞
＜/form＞
＜input type=』button』 value=』開啟』 onClick=』openmywindow()』＞
＜script language=』JavaScript』＞
function openmywindow()
{
var src = 『xx.htm』; //指定子視窗的位置與檔名
var winFeatures = 『dialogHeight:300px; dialogLeft:200px;』;
var obj = Form1; //將物件傳遞到新視窗中
window.showModalDialog(src, obj, winFeatures);
}
＜/script＞
新視窗網頁xx.htm：
＜form id=』Form2″＞
請輸入資料：＜input type=』text』 id=』wData『＞
＜input type=』button』 value=』送出』 onClick=』shoot(sendForm.wData.value);』＞
＜/form＞
＜script language=』JavaScript』＞
function shoot(val)
{
//取得前一頁所傳過來的物件
var getObj = window.dialogArguments;
//賦值
getObj.getval.value = val;
//若不想將視窗關閉，則註解掉下面這行即可。
window.close();
}
＜/script＞
父視窗中的紅字部分是將表單中的物件予以傳遞至showModalDialog的vArguments，此時的彈跳視窗頁就可以用window.dialogArguments的函數將名為wData的中的資料遞回至父視窗的getval裡了。
如果你想關閉彈跳視窗之後父視窗也能跟著改變網頁的狀態，如自動前往下一頁或是自行重新整理。那麼你只要在window.showModalDialog的下一行下達window.reload()，則父視窗即在視窗關閉之後執行重整的動作。
這樣有什麼好處？
至少你的網頁不會像是這個樣子：
你可以做成像這樣子漂亮又醒目的警告視窗：
是不是也可以這麼好看又好用呢
當然說到這裡要注意一點的是只適用於M$的IE，Firefox無法使用，F家的朋友，感謝您看到這裡，被騙進來了真是很抱歉，可能看到這裡心中已經有F那將會更有F(fu?k)，下篇將會有替代於Firefox的方案，請各位稍後唷