一個基本的彈出層應該滿足以下需求：
3、使用Esc鍵也可以關閉彈出層；
4、它是響應式的，並且相容現代主流瀏覽器。
HTML
2、很顯然，上面的連結關聯的彈出層的id是hw-layer。那好，選擇我們來準備彈出層hw-layer的html程式碼。
3、我們彈出層的最外層，也就是遮罩層.hw-overlay，我們會使用CSS控制它是一個半透明的層，用來隔開彈出層和頁面主體內容。r然後在.hw-layer-wrap主體層內，我們可以設定彈出層的內容，當然內容由你來定，我們本文結合例項彈出層的內容是一個確認對話方塊，類似window的confirm()。內容使用了bootstrap的col-*柵格佈局，還用了glyphicon字型圖示。其實最關鍵的就是需要遮罩層和主體層，內容可以根據專案需求自定義，因為它可能是個表單、也可能是個純文字說明的內容。
CSS
1、CSS也是關鍵的部分，我們先設定遮罩層，它預設情況下應該是不可見的，位置上fixed固定的，並且是覆蓋整個頁面的，它還是半透明的，我們這裡設定了背景黑色、透明度0.3，如background-color: rgba(0,0,0,0.3)。然後主體層.hw-layer-wrap，我們設定它的寬度，計算它的位置。寬度我們可以預設一個值，高度由於內容多少不確定，這裡我們不用設定一個具體的值，在後面的js部分會對高度處理，然後設定居中以及邊框陰影等效果。有關水平和垂直居中的設定可以參閱Helloweba文章：如何讓DIV水平和垂直居中。彈出層裡面的內容樣式可以自由設定，最後就是使用media query來設定小螢幕下的彈出層居中的問題。
2、我們使用jQuery來處理觸發彈出層和關閉彈出層效果，應此需要預先載入jQuery庫。showLayer(id)是一個自定義的函式，用來展示彈出層。當點選按鈕或連結呼叫這個showLayer(id)函式，它會漸現的效果展示，並且計算彈出層的高度位移距離，使得彈出主體層水平和垂直方向的居中。而函式hideLayer()就是隱藏彈出層，fadeOut()或者hide()就能實現。最後再加上觸發遮罩層的時候關閉彈出層以及使用Esc按鈕的時候關閉彈出層的程式碼。
3、其實到這裡，一個基本的彈出層效果已經做好了。我們這裡只是做一個基本的彈出層，你也可以進行繼續擴充套件程式碼。我們看過很多彈出層外掛，很多都是動態直接操作DOM的，也就是透過js程式碼先createElement，然後在將內容append到body裡的，這種方式如果是頻繁操作DOM的話會消耗一定的效能，所以從效能角度考慮的話，我推薦使用本文提供的彈出層方式。
一個基本的彈出層應該滿足以下需求：
3、使用Esc鍵也可以關閉彈出層；
4、它是響應式的，並且相容現代主流瀏覽器。
HTML
2、很顯然，上面的連結關聯的彈出層的id是hw-layer。那好，選擇我們來準備彈出層hw-layer的html程式碼。
3、我們彈出層的最外層，也就是遮罩層.hw-overlay，我們會使用CSS控制它是一個半透明的層，用來隔開彈出層和頁面主體內容。r然後在.hw-layer-wrap主體層內，我們可以設定彈出層的內容，當然內容由你來定，我們本文結合例項彈出層的內容是一個確認對話方塊，類似window的confirm()。內容使用了bootstrap的col-*柵格佈局，還用了glyphicon字型圖示。其實最關鍵的就是需要遮罩層和主體層，內容可以根據專案需求自定義，因為它可能是個表單、也可能是個純文字說明的內容。
CSS
1、CSS也是關鍵的部分，我們先設定遮罩層，它預設情況下應該是不可見的，位置上fixed固定的，並且是覆蓋整個頁面的，它還是半透明的，我們這裡設定了背景黑色、透明度0.3，如background-color: rgba(0,0,0,0.3)。然後主體層.hw-layer-wrap，我們設定它的寬度，計算它的位置。寬度我們可以預設一個值，高度由於內容多少不確定，這裡我們不用設定一個具體的值，在後面的js部分會對高度處理，然後設定居中以及邊框陰影等效果。有關水平和垂直居中的設定可以參閱Helloweba文章：如何讓DIV水平和垂直居中。彈出層裡面的內容樣式可以自由設定，最後就是使用media query來設定小螢幕下的彈出層居中的問題。
2、我們使用jQuery來處理觸發彈出層和關閉彈出層效果，應此需要預先載入jQuery庫。showLayer(id)是一個自定義的函式，用來展示彈出層。當點選按鈕或連結呼叫這個showLayer(id)函式，它會漸現的效果展示，並且計算彈出層的高度位移距離，使得彈出主體層水平和垂直方向的居中。而函式hideLayer()就是隱藏彈出層，fadeOut()或者hide()就能實現。最後再加上觸發遮罩層的時候關閉彈出層以及使用Esc按鈕的時候關閉彈出層的程式碼。
3、其實到這裡，一個基本的彈出層效果已經做好了。我們這裡只是做一個基本的彈出層，你也可以進行繼續擴充套件程式碼。我們看過很多彈出層外掛，很多都是動態直接操作DOM的，也就是透過js程式碼先createElement，然後在將內容append到body裡的，這種方式如果是頻繁操作DOM的話會消耗一定的效能，所以從效能角度考慮的話，我推薦使用本文提供的彈出層方式。