帶有半透明背景居中彈出層詳解
本章節介紹一下如何製作一個帶有半透明背景的垂直水平居中彈出層效果,因為當下此種效果在各種應用中都有出現,也具有良好的美觀度,下面就通過程式碼例項介紹一下如何實現此效果。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); } #win { position:absolute; top:50%; left:50%; width:400px; height:200px; background:#fff; margin:-102px 0 0 -202px; line-height: 200px; text-align: center; border: 4px solid #CCC; } </style> <script> </script> </head> <body> <div id="overlay"></div> <div id="win">螞蟻部落歡迎您</div> </body> </html>
以上程式碼實現了我們想要的效果,彈出層位於螢幕的中央,下面介紹一下實現過程:
一.實現原理:
(1).實現半透明效果使用如下程式碼:
[CSS] 純文字檢視 複製程式碼opacity:0.5; filter:alpha(opacity=50);
(2).設定半透明背景層全屏:
[CSS] 純文字檢視 複製程式碼position:absolute; width:100%; height:100%;
這裡的絕對定位很重要,否則width和height的值100%可能在某些瀏覽器中無效。
(3).設定彈出層居中:
[CSS] 純文字檢視 複製程式碼position:absolute; top:50%; left:50%; width:400px; height:200px; margin:-102px 0 0 -202px;
這個是核心部分,設定彈出層left和top值各為50%,這個彈出層是左上角居中,如果想讓彈出層中心點居中,則需要通過外邊距分別再向上和向左回移一定的尺寸,尺寸值恰好是彈出層實際佔用尺寸高度和跨度的一半。
二.相關閱讀:
(1).透明設定參閱CSS 透明度詳解一章節。
(2).絕對定位CSS position:absolute 絕對定位一章節。
相關文章
- 帶有半透明遮罩的彈出層例項程式碼遮罩
- 點選彈出一個帶有半透明遮罩的居中視窗遮罩
- javascript點選彈出可以關閉帶有灰色背景彈出層JavaScript
- 點選彈出居中帶有透明遮罩層視窗遮罩
- 帶有背景鎖屏遮罩的彈出層程式碼例項遮罩
- 點選彈出半透明層程式碼例項
- 帶有半透明遮罩層可關閉視窗遮罩
- android中popupwindow彈出後,螢幕背景變成半透明Android
- 帶有半透明效果的遮罩層程式碼例項遮罩
- CSS3滑鼠懸浮出現半透明遮罩層詳解CSSS3遮罩
- 點選彈出帶有灰色背景使用者登入視窗程式碼例項
- jQuery彈出帶有遮罩視窗效果jQuery遮罩
- bootstrap – 彈出層boot
- 點選彈出帶有遮罩的視窗效果遮罩
- Qt 讓彈出的視窗居中顯示QT
- 點選按鈕彈出一個居中div
- jquery實現的彈出居中視窗效果jQuery
- layui使用彈出層 關閉後彈層的內容又顯示出來UI
- 解決彈出層被Flash擋住的問題
- jQuery拖拽的彈出層效果jQuery
- Qt如何讓彈出的視窗居中顯示QT
- 去除 bootstrap 彈出框背景變暗的效果boot
- jquery滑鼠懸浮彈出帶有箭頭的tips效果jQuery
- AngularJS教程十七—— 彈出層元件AngularJS元件
- jQuery彈出層外掛popboxjQuery
- 前端:兩種實現帶背景遮罩的彈窗寫法前端遮罩
- h5單頁面彈出彈窗背景滾動問題H5
- JavaScript點選按鈕彈出層效果JavaScript
- 純CSS彈出層,城市切換效果CSS
- 滑鼠懸浮小圖彈出大圖效果詳解
- CSS div水平垂直居中效果詳解CSS
- bootstrap中的模態框(modal,彈出層)boot
- js實現彈出層滑鼠跟隨效果JS
- css滑鼠懸浮彈出說明層效果CSS
- javascript實現掉落彈出層------Day29JavaScript
- Android仿微信支付密碼彈出層Android密碼
- jquery智慧彈出層,自動判斷位置jQuery
- jQuery彈幕效果詳解jQuery