北方的冬天最怕有風，空氣雖然好了，但是異常的冷，吸幾口冷風感覺肺都結了冰。一大早小白來到辦公室琢磨使用者互動方面的問題，看了幾個網站發現很多網站的彈窗都是自定義的，而且還把彈窗周圍的區域做成了半透明狀，看上去非常不錯。于是小白也準備自己通過css布局一個彈窗試試，一來以後肯定會用上這個功能，二來熟悉一下最近掌握的CSS+HTML布局。
說幹就幹，小白打開webStrom做起了彈窗的布局。他首先用一個容器layer作為彈窗的容器，然後裡面放了視窗容器（dialog），視窗容器裡面還包含了三個子容器，分别是标題（layerTitle）、内容區域（layerContent）、按鈕區域（layerBTContainer）。
小白想：“layer要充滿并遮擋整個浏覽器視窗，而且滾動頁面它還得一直保持遮擋的狀态，把它設定為浮動類型（position:fixed）的容器最合适。裡面的dialog需要保持在浏覽器的最中心位置，是以最好把dialog設定成固定寬度和高度，這樣可以很好的實作居中。”，于是小白先把layer和dialog以及dialog内部的容器設定了一個初步的CSS樣式。
layer的position設定為fixed，上下左右距離都設定成0，就可以達到占用整個視窗。裡面的dialog容器小白根據剛學習的CSS溢出法讓dialog上下都居中。dialog如果是絕對定位，設定上下左右距離都為0它會占用整個父容器區域，但是如果CSS中限制了dialog的寬和高并且設定了marin為auto，它就會基于父容器居中。
為了測試transition屬性，小白還把确定按鈕上面設定了一個滑鼠移上去以後漸變的效果，做完以後就是這個樣子：
看到布局好的彈窗小白心裡非常高興，突然他想到一個問題，這個彈窗背景還沒設定半透明，于是趕緊往layer上增加了opacity:0.5這個半透明屬性，小白滿懷資訊的重新整理了頁面，當看到結果時小白發現背景和視窗都變成了半透明。
正好這時老朱從小白身邊經過，随口跟小白說了一句：“小白，你是不是把視窗的父容器設定成半透明了？”
“是啊！父容器背景是黑色，是以我把父容器設定成了半透明！”
“可是父容器設定半透明會對他的子元素産生影響啊，這樣會導緻它裡面的所有元素都變成半透明，你為啥不給視窗添加一個兄弟容器來實作這個效果呢？”
小白仔細想了想，說道：“哦！我明白了，我可以在layer容器裡面放一個跟layer一樣大的容器，這樣就不會沖突了，我再試試！”
不一會小白找到老朱，說道：“我改好了，現在我給dialog添加了一個layerbg容器作為背景層，然後把layer之前的背景色和透明度去掉，放到了新增加的背景層上面，背景層高和寬與layer一樣是以這樣就不會把dialog也變成半透明了。你看看效果。”
老朱說：“嗯！不錯，你現在通過HTML和CSS布局的這個彈窗還能做很多完善，比如出現彈窗時增加一個動畫效果、給它添加一個關閉按鈕或者取消按鈕等等。除了提示功能以外，你現在做的這個還能再進行深入修改，把它變成可以輸入文字的prompt框，點選确定以後可以對頁面或者資料庫資料進行修改。”