簡單的彈出框(dialog)制作
對一般的網站而言，彈出框是比較常見的。或是給出用戶操作提示，或是通過彈出框打開一個小窗口以提示信息，或是給出錯誤警示等等。但是由於瀏覽器自帶的彈出窗口alert , confirm , prompt樣式比較單調，且不同瀏覽器有不同的默認樣式設置。所以在日常工作中，給網站做一個自定義的彈出框十分必要。
當然一般的彈出框制作起來也十分簡單，接下來我就相關細節做一說明。
HTML部分：
HTML部分由三部分組成，觸發彈出框按鈕 button , 彈出框遮罩層black, 彈出框盒子dialog包裹彈出框的所有內容。
寫HTML結構時注意它們三部分都是平級關系。
CSS代碼部分：
關鍵環節是，需要給遮罩層，和彈出框盒子設置固定定位。遮罩層需要全屏覆蓋，所以寬高設置為100%。在為觸發狀態他們都應該處於display:none;隱藏狀態。當觸發時直接顯示。
JS代碼：
彈出框的一般效果是
當我們點擊黑色透明區域或者X 時都需要將彈出框和遮罩層關閉。
以下是這個效果實現的JS代碼部分：
首先，我們要逐一獲取相關元素，包括：觸發的按鈕Btn , 遮罩層Back , 彈出框盒子DialogBox , 彈出框盒子自己的關閉按鈕 DialogClose. 由於都會用到公共的document,這里由doc這個變量來代替。
獲取完了相關元素后，給對應的元素添加相應的點擊事件已觸發相關行為。
Btn點擊時將打開我們的盒子，遮罩層和彈出框盒子都應當顯示出來，修改他們的display屬性；
彈出框被打開后，點擊DialogClose 或者 Back(其它黑色區域時) 都需要將其關閉，修改他們的display屬性為none;
到這里一個基本的彈出框就制作完畢。
優化
由於每一個click事件都是觸發相關元素的顯隱控制，可以考慮使用一個公共方法，傳遞不同的參數來實現這個功能。
這里我們寫了一個公共方法 ShowHide函數，接收的第一個參數為顯隱閥門的布爾值。其它參數為需要進行同時控制的元素。
這里我們使用到函數自身的arguments對象。arguments里面保存了該函數傳遞進來的所有參數，這里當作一個數組使用。
用一個for循環迭代arguments。參數的第一項是布爾值，用來決定顯隱關系，所以for循環i的第一個參數為1.依次給其它各項設置style屬性。
通過這種方法，代碼的復用性提高了很多。方便統一修改，引用。