网页的对话模式框

先前在使用 Flickr 時便發現，Flickr 的 tags 編輯功能製作成仿單機 Windows App 的 Modal Dialog，相當正點。所謂的 Modal Dialog 就是獨佔式訊息視窗，當 Modal Dialog 跳出時，使用者僅能對該 Modal Dialog 進行操作，其母視窗是鎖死停止回應的。這在單機 Windows App 是蠻常見的應用，但是如果要在 Web App 上實作，就必須倚靠 DHTML + JavaScript 來實現。

實作 Modal Dialog 的原理很簡單，就是在原先的 Web page 上動態建立一個 DIV 區域，此 DIV 區域又細分為兩部分，其一為 Modal Dialog 本身，其二為背景區域，所謂的背景區域，就是一個半透明的全螢幕大小區塊，目的是屏避母視窗的操作。因為 Yu-Chao 許久沒有寫 JavaScript 了，語法幾乎全忘了，為了能在短時間實作出這個功能，於是想直接在網路上搜尋現成的 js 元件，果不其然，蠻多人都已經實作出各種的 Modal Dialog：

• http://www.wingo.com/dialogbox/index.html
• http://www.eggheadcafe.com/articles/javascript_modal_dialog.asp
• http://www.sitening.com/blog/2006/03/29/create-a-modal-dialog-using-css-and-javascript/
• http://sublog.subimage.com/articles/category/submodal

其中強力推薦 subModal，不僅視覺效果最好，且元件本身的穩定度及完成度都很高。我將該元件再稍微修改了一下，新增了一些細部設定，重新發佈為『YuChaoModalDialog』。你可以點選這邊下載完整原始碼及範例檔。