1. <header class="header"></header>   <div class="wrap-page">  
2.     <section class="page"></section>       ...   
3. </div>   <footer class="footer"></footer>  
4. <div class="overlay">       <section class="modal">  
5.         <div class="modal-hd"></div>           <div class="modal-bd"></div>  
6.         <div class="modal-ft"></div>       </section>  
7. </div>  

這個(gè)overlay遮罩層的問題，現(xiàn)在這里說明下為什么這么設(shè)計(jì)。

一般來說看到的overlay都與modal是兄弟元素，而不是嵌套關(guān)系。本來我也是這么設(shè)計(jì)的，這就是習(xí)慣。后來由于modal居中的問題，重新審視了下這個(gè)問題：

為什么遮罩層的overlay與彈窗內(nèi)容是兄弟元素？

說實(shí)話真想不出什么理由，非得搞成兄弟元素。后來突然意識(shí)到以前的遮罩層如果不采用半透明圖片的話，就得使用opacity（ie6-8不支持，通過濾鏡模擬），而這個(gè)屬性會(huì)對(duì)整個(gè)子元素都起作用，而且還沒辦法通過子元素覆寫這個(gè)值。這是我能想到的一條最佳理由，如果還有其他理由歡迎交流。

對(duì)于高上大的移動(dòng)端來說，都是rgba時(shí)代了，所以opacity回家吃飯先。既然這個(gè)對(duì)子元素的影響已經(jīng)不是問題，那么嵌套關(guān)系就可以成立，而且嵌套還有一個(gè)非常好的理由，水平垂直居中，flex小指一動(dòng)即可。而兄弟元素的水平垂直居中就得設(shè)置modal的top和left的值為50%，然后再設(shè)置translate的x和y方向都-50%

所以果斷拋棄兄弟元素設(shè)計(jì)換成嵌套關(guān)系。

因?yàn)閛verlay采用了flex布局來控制子元素居中，所以不難呢過采用display為none/block來顯示隱藏遮罩層overlay，而是通過z-index的層級(jí)來控制，而modal部分通過添加刪除modal-in這個(gè)class來控制顯示隱藏

scss代碼如下：