前言

開發中我們經常會碰到這種需求—自定義彈窗，那麼如何建立一個正確的彈窗呢？

考慮的方面

1. 定位

彈窗一般都需要垂直水平居中，也許通過flex或者transform能夠很快的實現垂直水平居中，但是ie下就炸了，下面我介紹一種垂直水平居中的技巧—使用三層dom來實現垂直水平居中

html

<div class="center-outside">
  <div class="center-middle">
    <div class="center-inner">xxx</div>
  </div>
</div
 
>

css

.center-outside {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 999;
    width: 100%;
}

.center-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1000;
}

.center-inner {
    position: absolute;
    top: -50%;
    left: -50%;
    height: 100
 
%;
    width: 100%;
}

戳這裡檢視demo

動態生成dom

本例子使用jquery，需要注意以下幾點
1. 框彈出的時候需要禁止頁面滑動
2. 大於一屏的頁面最右邊會有一個滾動條，頁面渲染的時候會忽略滾動條的寬度(15px)，但position:fixed; height: 100%; width: 100%的佈局不會忽略這個寬度，導致開啟彈窗的一瞬間頁面會像右移動15px。解決方案是在彈窗開啟時設定body的padding-right為15px; demo地址
3. 彈窗彈出後點擊關閉按鈕或者背景框可以關閉彈窗，並且頁面恢復可滾動狀態

這裡直接貼demo