北方的冬天最怕有風恩够，空氣雖然好了背率，但是異常的冷话瞧，吸幾口冷風感覺肺都結(jié)了冰。一大早小白來到辦公室琢磨用戶交互方面的問題寝姿，看了幾個網(wǎng)站發(fā)現(xiàn)很多網(wǎng)站的彈窗都是自定義的交排，而且還把彈窗周圍的區(qū)域做成了半透明狀，看上去非常不錯饵筑。于是小白也準備自己通過css布局一個彈窗試試埃篓，一來以后肯定會用上這個功能，二來熟悉一下最近掌握的CSS+HTML布局根资。
說干就干架专，小白打開webStrom做起了彈窗的布局。他首先用一個容器layer作為彈窗的容器玄帕，然后里面放了窗口容器（dialog）部脚，窗口容器里面還包含了三個子容器，分別是標題（layerTitle）桨仿、內(nèi)容區(qū)域（layerContent）睛低、按鈕區(qū)域（layerBTContainer）。
小白想：“l(fā)ayer要充滿并遮擋整個瀏覽器窗口服傍，而且滾動頁面它還得一直保持遮擋的狀態(tài)钱雷，把它設(shè)置為浮動類型（position:fixed）的容器最合適。里面的dialog需要保持在瀏覽器的最中心位置吹零，因此最好把dialog設(shè)置成固定寬度和高度罩抗，這樣可以很好的實現(xiàn)居中〔右危”套蒂，于是小白先把layer和dialog以及dialog內(nèi)部的容器設(shè)定了一個初步的CSS樣式钞支。
layer的position設(shè)置為fixed，上下左右距離都設(shè)置成0操刀，就可以達到占用整個窗口烁挟。里面的dialog容器小白根據(jù)剛學習的CSS溢出法讓dialog上下都居中。dialog如果是絕對定位骨坑，設(shè)置上下左右距離都為0它會占用整個父容器區(qū)域撼嗓，但是如果CSS中限制了dialog的寬和高并且設(shè)置了marin為auto，它就會基于父容器居中欢唾。
為了測試transition屬性且警，小白還把確定按鈕上面設(shè)置了一個鼠標移上去以后漸變的效果，做完以后就是這個樣子：
看到布局好的彈窗小白心里非常高興礁遣，突然他想到一個問題斑芜，這個彈窗背景還沒設(shè)置半透明，于是趕緊往layer上增加了opacity:0.5這個半透明屬性祟霍，小白滿懷信息的刷新了頁面杏头，當看到結(jié)果時小白發(fā)現(xiàn)背景和窗口都變成了半透明。
正好這時老朱從小白身邊經(jīng)過沸呐，隨口跟小白說了一句：“小白大州，你是不是把窗口的父容器設(shè)置成半透明了？”
“是按剐弧！父容器背景是黑色疮茄，所以我把父容器設(shè)置成了半透明滥朱！”
“可是父容器設(shè)置半透明會對他的子元素產(chǎn)生影響啊，這樣會導(dǎo)致它里面的所有元素都變成半透明力试，你為啥不給窗口添加一個兄弟容器來實現(xiàn)這個效果呢徙邻？”
小白仔細想了想，說道：“哦畸裳！我明白了缰犁，我可以在layer容器里面放一個跟layer一樣大的容器，這樣就不會沖突了怖糊，我再試試帅容！”
不一會小白找到老朱，說道：“我改好了伍伤，現(xiàn)在我給dialog添加了一個layerbg容器作為背景層并徘，然后把layer之前的背景色和透明度去掉，放到了新增加的背景層上面扰魂，背景層高和寬與layer一樣所以這樣就不會把dialog也變成半透明了麦乞。你看看效果蕴茴。”
老朱說：“嗯姐直！不錯倦淀，你現(xiàn)在通過HTML和CSS布局的這個彈窗還能做很多完善，比如出現(xiàn)彈窗時增加一個動畫效果声畏、給它添加一個關(guān)閉按鈕或者取消按鈕等等撞叽。除了提示功能以外，你現(xiàn)在做的這個還能再進行深入修改砰识，把它變成可以輸入文字的prompt框能扒，點擊確定以后可以對頁面或者數(shù)據(jù)庫數(shù)據(jù)進行修改”枥牵”
想學H5的朋友可以關(guān)注老爐初斑，您的關(guān)注是我持續(xù)更新《小白HTML5成長之路》的動力！
